How do I use this Bootstrap snippet?

Load Bootstrap 3.3.4, paste the HTML, add the CSS styles, and include the JS if present to match the live demo.

Can I use it commercially?

Yes. Snippets are free for personal and commercial projects. Review the snippets license page for details.

Is the layout responsive?

Yes. It is built on Bootstrap 3.3.4 and inherits its responsive grid and components.

Bootstrap html snippet. pulse effect

HTML code

Clean, semantic HTML that powers this Bootstrap 3.3.4 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<div class="container bootstrap snippets bootdeys">
    <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

Scoped CSS that styles the component. Paste it after Bootstrap 3.3.4 to keep the design, spacing, and responsiveness consistent.

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