Combined-Button-Hover-Effekt mit Rahmen  [GELÖST]

Schrauberecke: Hier geht es um optische und funktionelle Veränderungen (ohne Themes oder Personas) von Firefox oder von Webseiten per CSS-Codes oder JavaScript.
Antworten
kyou

Combined-Button-Hover-Effekt mit Rahmen  [GELÖST]

#1

Beitrag von kyou Themen-Starter » Di, 30. Jan 2018 2:09

Wahrscheinlich packt sich kein Mensch die Zoom- und Edit-Buttons ins Überlauf-Menü.

Aber mir ging es nur darum, einen bestimmten Hover-Effekt zu realisieren.

Aber das Coole an dem Code ist, dass beim Wechsel zwischen benachbarten Schaltflächen, der Rahmen, der sich zwischen den Schaltflächen befindet, seine Position behält. Das geht nämlich nicht mit den normalen Border-Eigenschaften. Wenn der Rahmen zwischen zwei Schaltflächen seine Position nur um ein Pixel ändert, ist das irritierend. Außerdem ist der Code recht kompakt.

Der Mauszeiger befand sich auf der 100%-Schaltfläche, als ich den Screenshot machte.

Code: Alles auswählen

#widget-overflow #copy-button,
#widget-overflow #zoom-reset-button {
	margin: 0 1px !important
}
	
#widget-overflow #edit-controls .toolbarbutton-combined:not([disabled]):hover,
#widget-overflow #zoom-controls .toolbarbutton-combined:hover {
	box-shadow: 1px 0 blue, -1px 0 blue;	
}

#edit-controls separator,
#zoom-controls separator {
	display: none !important;
}
Dateianhänge
Just_for_fun.png
Just_for_fun.png (7.39 KiB) 217 mal betrachtet

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast