<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"> <a href="http://www.csshint.com/" target="_blank" class="button-wrap">click me</a> </div>

body{ background: #7c5be3; margin: 0px; padding: 0px; } .button-wrap{ padding: 14px 46px; color: #fff; background-color: #ff0e1f; border: 1px solid transparent; box-shadow: 0 3px 3px 0 rgba(1,1,1,.55); -webkit-transition: .5s cubic-bezier(.22,.61,.36,1); -moz-transition: .5s cubic-bezier(.22,.61,.36,1); transition: .5s cubic-bezier(.22,.61,.36,1); position: relative; display: inline-block; margin: 100px auto; text-transform: uppercase; font-size: 15px; } .button-wrap:hover { -webkit-filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7)); filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7)); color: #fff; text-decoration: none; } .button-wrap:before{ content:""; position: absolute; top: -1px; left: -15px; width: 0; height: 0; border-top: 54px solid #ff0e1f; border-left: 15px solid transparent; -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; transition: border-color .2s ease-in-out; } .button-wrap:after{ content:""; position: absolute; top: -1px; right: -15px; width: 0; height: 0; border-top: 54px solid #ff0e1f; border-right: 15px solid transparent; -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; transition: border-color .2s ease-in-out; }