pulse effect

Bootstrap snippet. pulse effect, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: css,effect

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="container bootstrap snippets">
    <button class="btn btn-info wave in">Button</button>  
    <button class="btn btn-primary wave in">Button</button>  
    <button class="btn btn-danger wave in bd-danger">Button</button>  
    <button class="btn btn-warning wave in">Button</button>  
    <button class="btn btn-default wave in">Button</button>  
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
    margin-top:20px;
    background: #2dc3e8;
}

@-webkit-keyframes wave {
    5% {
        opacity: .6;
    }
    27% {
        -webkit-transform: scale(1.8);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes wave {
    5% {
        opacity: .6;
    }
    27% {
        -moz-transform: scale(1.8);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes wave {
    5% {
        opacity: .6;
    }
    27% {
        -o-transform: scale(1.8);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes wave {
    5% {
        opacity: .6;
    }
    27% {
        -webkit-transform: scale(1.8);
        -moz-transform: scale(1.8);
        -ms-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.wave.in {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.wave.in:after {
    content: "";
    top: 3px;
    left: 5px;
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: 8121991;
    background-image: -webkit-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
    background-image: -moz-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
    background-image: -o-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
    background-image: radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
    border: 4px solid #fff;
    -webkit-animation: wave 3s 1s infinite linear;
    -moz-animation: wave 3s 1s infinite linear;
    -o-animation: wave 3s 1s infinite linear;
    animation: wave 3s 1s infinite linear;
    zoom: 1;
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bd-danger{
    
}
                                    

Similar snippets

Bootstrap snippet simple user cards contact info

simple user cards contact info

View

Bootstrap snippet alerts with arrow

alerts with arrow

View

Bootstrap snippet colored users cards

colored users cards

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Nov 11th 2015, 10:52

Views: 3.1K

Rated 5/5 based on 3 reviews