pulse effect

This bootstrap snippet called "pulse effect" 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

This is the HTML code for this bootstrap snippet

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

<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>

This is the CSS code for this bootstrap snippet

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

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{
    
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Nov 11th 2015, 10:52

Views: 2.9K

Rated 5/5 based on 1 reviews