my code stock.com

4th Hover Effect on the gallery

Usage:

@include button-hover-4(vars);

Snippet options

Download: Download snippet as button-hover-4.scss.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

@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));
    }
} 

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.