<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<ul class="list-inline blast-points">
<li class="confetti-button animate"><a href="#">
<span class="icon-circul bg8">
<img src="">afssfsdf</span>
<em>Media and Entertainment</em>
</a>
</li>
<li><p>Lorem ipsum</p></li>
<li><p>Lorem ipsum</p></li>
</ul>
</div>
</div>
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline>li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.list-inline>li p {
padding: 10px;
border: #ccc 1px solid;
border-radius: 10px;
}
*, ::after, ::before {
box-sizing: border-box;
}
.blast-points li {
list-style-type: none;
width: 100px;
height: 130px;
margin: 10px;
display: inline-block;
vertical-align: top;
}
.blast-points li .icon-circul.bg8 {
padding: 50px;
background: rgba(255,153,102,1);
background: -moz-linear-gradient(-45deg,rgba(255,153,102,1) 0,rgba(255,94,97,1) 100%);
background: -webkit-gradient(left top,right bottom,color-stop(0,rgba(255,153,102,1)),color-stop(100%,rgba(255,94,97,1)));
background: -webkit-linear-gradient(-45deg,rgba(255,153,102,1) 0,rgba(255,94,97,1) 100%);
background: -o-linear-gradient(-45deg,rgba(255,153,102,1) 0,rgba(255,94,97,1) 100%);
background: -ms-linear-gradient(-45deg,rgba(255,153,102,1) 0,rgba(255,94,97,1) 100%);
background: linear-gradient(135deg,rgba(255,153,102,1) 0,rgba(255,94,97,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9966', endColorstr='#ff5e61', GradientType=1 );
}
.confetti-button.animate:before{display:block;animation:topBubbles ease-in-out .75s forwards}
.confetti-button.animate:after{display:block;animation:bottomBubbles ease-in-out .75s forwards}
@keyframes topBubbles{0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}50%{background-position:0 80%,0 20%,10% 40%,20% 0,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}
100%{background-position:0 70%,0 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}@keyframes bottomBubbles{0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0}50%{background-position:0 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0}
100%{background-position:0 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
.confetti-button.animate:after{display:block;animation:bottomBubbles ease-in-out .75s forwards}
@keyframes topBubbles{0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}50%{background-position:0 80%,0 20%,10% 40%,20% 0,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}
100%{background-position:0 70%,0 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}@keyframes bottomBubbles{0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0}50%{background-position:0 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0}
100%{background-position:0 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}
