Wie Entferne ich den Verlauf auf :active-Zustand?

Ich brauche, um eine Schaltfläche Aussehen flach auf den :active-Zustand.

Lassen Sie uns sagen, zum Beispiel, die ich habe:

CSS:

button {
    background:linear-gradient(#fc9, #ed8) /* some light orange gradient */
}
button:hover {
    background:linear-gradient(#ed8, #da7) /* some darker orange gradient on hover */
}
button:active {
    background:orange; /* And here I need just plane flat orange color */
}

HTML:

<button>Click Me!</button>

Aber statt dessen, bekomme ich die Steigung aus den früheren Zustand.

Gibt es irgendwelche hintergrund-CSS-Eigenschaften zu deaktivieren, die Steigung?

z.B. blackground:liner-gradient-OFF; or background:no-inherit;

  • background-image: none;
  • Sind Sie sicher, dass background: orange nicht bereits tun? Es sollte, da es implizit setzt background-image: none dem überschreiben sollten, Ihren Verlauf ein.
  • Wohoo! Danke Jungs. Scheint, die Frage ist sortiert! background-image:none; schaltet alle vorherigen Gradienten. Zumindest jetzt auf einen Klick habe ich eine flat-orange. @BoltClock ich nicht, warum in meinem Verständnis ist es wohl zu überschreiben, die Verläufe aber in meinem Fall ist es nicht. Bemerkt, dass die Frage nicht zum ersten mal
InformationsquelleAutor Alex Reds | 2012-11-05
  1. 13

    Was Sie wirklich brauchen, ist dies:

    button:active {
    background-image: none;
    background-color:orange;
}
    • Danke -- ich war auf der Suche nach einem Selektor spezifischer ist als "keine", und ich wusste nicht linear-gradient ist eine form von background-image.
    • Der aktive Zustand wird Erben, die Stile aus der Standard-Zustand. So, wenn Sie background-Eigenschaft, Sie können spezifischer sein mit den Entscheidungen. So können Sie mit background-color und background-image in die gleiche Klasse. Wenn Sie CSS3-Farbverläufe, die einen linearen Farbverlauf wird automatisch zugewiesen, um die background-image-Eigenschaft und daher müssen Sie, um es so keine. So haben Sie nur 2 Eigenschaften, die Sie verwenden können, d.h. background-image: none und background-color: transparent und machen es flach, genau wie Sie wollten, meine Antwort ist bereits verfügbar.
    • tolle Antwort!!!+1
    InformationsquelleAutor Devner
  2. 4

    Sind Sie sicher, dass :active ist der status, den du suchst? Der :active-status zeigt nur, während Sie den Knopf anklicken (Maustaste gedrückt ist). Sobald die Taste losgelassen wird, wird der status nicht mehr :aktiv.

    • Ich habe mich immer gefragt was :die aktiven haben x) haha
    • vielen Dank für Ihre Antwort. Ja, dass ist genau das, was ich verwende in der Regel für solche Fälle 🙂 kennst du andere Wege der Nachahmung ein PUSH von real-physischen Tasten? Soweit ich weiß ist der :active-Zustand ist genau das, was ist für eine echte push-und release-Status der Schaltfläche. In Verbindung mit 3d-css-Effekte, es funktioniert wirklich 🙂
    InformationsquelleAutor csdragonchick
Schreibe einen Kommentar