my code stock.com

4th Hover Effect on the gallery

Usage:

@include button-hover-4(vars);

Snippet-Optionen

Download: Snippet als button-hover-4.scss herunterladen.
Snippet kopieren: Für diese Aktion benötigst du einen kostenlosen my code stock.com Account
Embed-Code : Du findest den Embed-Code für dieses Snippet am Ende der Seite, wenn du es in eine Webseite oder einen Blog einbinden möchtest!

@mixin button-hove-4($bg-color: $form-button-background, $text-color: #000, $shadow-color: #C8CAC5){

    background: transparent;
    z-index: 1;
    position: relative;
    @include transition-animation( $properties: ( color, border));
    border: 3px solid $bg-color;

    &:before,
    &:after {
        content: '';
        background: $bg-color;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: -1;
        @include transition-animation( $properties: ( width, height, background, left));
    }

    &:before { left: 0; }
    &:after { right: 0; }

    &:hover {
        color: $text-color;
        @include transition-animation( $properties: ( color, border));

        &:before,
        &:after {
            width: 0%;
            background: transparent;
            @include transition-animation( $properties: ( width, height, background, left));
        }
    }

    &:active {
        bottom: 0;
        margin-bottom: 0;
        background: rgba($bg-color, .5);
        color: $text-color;
        @include transition-animation( $properties: ( background, color));
    }
} 

Jetzt kostenlosen my code stock.com Account anlegen

my code stok.com ist ein kostenloser Dienst zum Speichern und Verwalten von Code-Snippets jeglicher Art und Programmiersprache. Wir bieten dir viele Vorteile für die tägliche Arbeit mit Code-Snippets und der gemeinsamen Arbeit im Team, probier es aus!

Jetzt informieren und registrieren

Du kannst die Höhe des iFrame-Codes beliebig anpassen! Mehr Infos findest du in unserer Embed-Code API Referenz.