<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="pull-alert"> <div class="alert-news pull-right" > <button type="button" class="btn btn-default btn-circle btn-xl-alert btn-lateral btn-float-alert"><i class="glyphicon glyphicon-envelope"></i></button> <hr class="hr-alert"> <strong>Novidades na Bazis, chegou a nova coleção vem conferir</strong> </div> </div>

.alert-news{ position: ABSOLUT; padding-right: 55px; width: 350px; bottom:20px; border-radius: 15px; background-color: #FFF; color: #000; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); } /*alert-success*/ .alert-success button{ background-color: #008ECF; color:#FFF; } .alert-success hr{ border-color: #008ECF; } /**/ /*alert-warning*/ .alert-warning button{ background-color: #E5A218; color:#FFF; } .alert-warning hr{ border-color: #E5A218; } /**/ /*alert-error*/ .alert-error button{ background-color: #FF0000; color:#FFF; } .alert-error hr{ border-color: #FF0000; } /**/ .hr-alert { margin-top: 0px; margin-bottom: 10px; border: 0; border-top: 4px solid #eee; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl-alert { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; cursor:default; transition: background-color 1s, color 1s; } .btn-float-alert{ position: absolute; right:-20px; top:-20px; } .pull-right { position: absolute; right: 5%; background:#fff; }

$(document).ready(function () { $('.alert-news').fadeIn(); });