Hallo, Besucher der Thread wurde 1,2k aufgerufen und enthält 2 Antworten

letzter Beitrag von McCracker007 am

[CSS] Animierter Button Effeckt

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,

    nachfolgend einmal eine Möglichkeit wie man einen schicken Button Effeckt mit wechselnden Border-Farben on hover so wie auch bei activen Button erzeugen kann.


    Bildschirmfoto_2020-07-23_09-19-45.pngFeatures

    • Leicht am eigenen Style anpassbar
    • Geschwindigkeit des Farbwechsels regulierbar


    Hinweis: Da die Animation hier als Screenshot nicht richtig zur Geltung kommt, hier mal ein Beispiel auf Codepen.io: Button Effect. Beachtet bitte, dass es sich lediglich um ein schnelles Beispiel handelt in welchen kein großer Wert auf das aussehen genommen wurde, sondern nur darstellen soll wie der Button Effeckt letztlich aussehen würde.

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Benutzung:

    1. In der Zeile background: linear-gradient(45deg, #ff0000,#48ff00,#ff0000); die Farben nach Deinen belieben anpassen.
    2. In den Zeilen animation: glowing 20s linear infinite; , transition: opacity .3s ease-in-out; und @keyframes glowing die Geschwindigkeit der Farbwechsel-Animation nach Deinen belieben anpassen.
    3. In weiteren Zeilen wie z.B. filter: blur(5px);, etc. können entsprechend noch weitere CSS-Anpassungen nach euren Wünschen vorgenommen werden.


    Viel Spaß damit ;)


    Gruss,
    Andreas

    Hab dazu mal ne kleine Frage.


    Ich will das als Url machen . also

    Class ist : .externalURL


    Will das aber NICHT als hover sonder als Standard wie mache ich das .

    Kann mir da jemand weiter helfen bitte. :)

    Farben etc habe ich schon fertig.


    Liebe Grüße

    McCracker007

    Ok erledigt. Habe es anders geregelt. ^^

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

  • Belarus

    Hat den Titel des Themas von „Button Effeckt“ zu „[CSS] Animierter Button Effeckt“ geändert.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!