.btn{ color: #800d16; background: linear-gradient(#f1f1f1,#ddd); font-family:'Archivo', sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; padding: 8px 15px; border-radius: 50px; border: none; letter-spacing: 1px; overflow: hidden; position: relative; z-index: 1; transition: 0.4s ease-in-out; } .btn:focus, .btn:hover{ color: #fff; } .btn:before, .btn:after{ content: ""; background: #800d16; transform: rotate(10deg); width: 140%; height: 50px; position: absolute; top: -80px; left: 20%; z-index: -1; transition: all 0.4s ease-in-out; } .btn:after{ top: 80px; left: -20%; } .btn:hover:before{ top: -20px; left: -20%; } .btn:hover:after{ top: 10px; left: -23%; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 30px; } }