<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 ----------> <button class="snip1434">Submit<i class="ion-settings"></i></button> <button class="snip1434 hover">Read More<i class="ion-clipboard"></i></button> <button class="snip1434">Add to Cart<i class="ion-stats-bars"></i></button> <button class="snip1434">Subscribe<i class="ion-person-stalker"></i></button>

@import url(https://fonts.googleapis.com/css?family=Raleway:600); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); .snip1434 { font-family: 'Raleway', Arial, sans-serif; border: none; border-radius: 5px; overflow: hidden; color: #ffffff; cursor: pointer; padding: 0px 25px 0px 70px; text-align: center; display: inline-block; margin: 12px 25px; font-weight: 600; outline: none; position: relative; font-size: 18px; line-height: 50px; background-color: #8a1a32; letter-spacing: 1px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .snip1434 i { font-size: 4em; width: 55px; line-height: 50px; position: absolute; left: -5px; top: 5px; -webkit-transform: rotate(-25deg) scale(1); transform: rotate(-25deg) scale(1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .snip1434:hover, .snip1434.hover { color: #ffffff; background-color: #ac203f; } .snip1434:hover i, .snip1434.hover i { -webkit-transform: rotate(-20deg) scale(1.3); transform: rotate(-20deg) scale(1.3); } /* Demo purposes only */ body { background-color: #212121; padding: 50px 0; }