:root{ --white:#fff; --color:#3c6382; --main-color:#0a3d62; } .btn{ color: var(--white); background: var(--color); font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 8px 15px; border-radius: 50px; border: none; overflow: hidden; position: relative; z-index: 1; transition: all 0.35s; } .btn:hover, .btn:focus{ color: var(--white); } .btn:before, .btn:after{ content: ""; background-color:var(--main-color); width: 140%; height: 28px; transform: rotate(10deg); position: absolute; top: -80px; left: 20px; transition: 0.3s ease-in-out; z-index: -1; } .btn:after{ top: auto; bottom: -80px; left: -20px; } .btn:hover:before, .btn:hover:after{ top: -10px; left: -20px; } .btn:hover:after{ top: auto; bottom: -10px; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 30px; } }