<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 ----------> <style> @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap'); </style> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" /> <div class="container"> <div class="form-group"></div> <div class="row"> <div class="form-group"> <button class="Amazon"> <span></span>Continue with Amazon </button> </div> </div> </div>

body { font-family: 'Lato', sans-serif; font-size: 14px; } .Amazon { appearance: none; cursor: pointer; display: inline-flex; text-decoration: none; background-color: #f5d47a; color: #000; text-align: center; width: 300px; border: 1px solid #B38B22; border-radius: 3px; font-weight: 700; line-height: 28px; justify-content: center; padding-bottom: 8px; align-items: center; padding-top: 8px; } .Amazon span { background-image: url("https://s.gr-assets.com/assets/gr/icons/icon-amazon-a.svg"); background-origin: padding-box; background-position: 0; background-repeat: no-repeat; background-size: 100% 100%; height: 21px; margin-left: -7px; margin-right: 8px; width: 21px; } .Amazon:hover{ background-color: #F8C15D; color: #333333; text-decoration: none; }