.btn{ color: #fff; background: #555; font-family: 'Quicksand', sans-serif; font-size: 22px; font-weight: 600; text-transform: capitalize; padding: 8px 20px; border: none; border-radius: 0; position: relative; z-index: 1; transition: all 0.3s ease; } .btn:focus{ color: #fff; } .btn:hover{ color: #f43486; background: transparent; text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0,0,0,0.1); } .btn:before{ content: ""; background: #f43486; width: 100%; height: 100%; opacity: 0; transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; z-index: -1; transition: all 0.3s ease; } .btn:hover:before{ width: 45%; opacity: 0.15; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 20px; } }