<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"> <a href="#" class="btn btn--border btn--center btn--border-lightgrey"> <span class="btn-text">Read more</span> <span class="btn-arrow"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="7" viewBox="0 0 16 7"> <path fill="#174233" fill-rule="nonzero" d="M12.727 0L16 3.394l-3.273 3.394V4.245H0V2.74h12.73z"></path> </svg> </span> </a> </div> </div>

.press__container .btn { margin-top: 3.125em; } btn--center { display: table; margin: 0 auto; } .btn--border-lightgrey { border: 1px solid #e1eaec; } .btn--border { border: 1px solid #174233; color: #174233; } .btn { position: relative; font-family: "Canela Web",serif; font-size: 1.125em; text-align: center; padding: 20px 40px; } .btn--border-lightgrey:before { background-color: #174233; } .btn:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; transform: scaleX(0); transform-origin: right; transition: transform 0.9s cubic-bezier(0.6,0.05,0.01,0.99); backface-visibility: hidden; } .btn:hover:before { transform: scaleX(1); transform-origin: left; transition: transform 0.9s cubic-bezier(0.6, 0.05, 0.01, 0.99); } .btn--border-lightgrey:hover .btn-text { color: #fff; } .btn--border-lightgrey:hover .btn-text { color: #fff; } .btn .btn-text { position: relative; z-index: 999; } .btn-arrow { position: relative; top: -3px; left: 5px; z-index: 99; }