.btn{ color: #555; font-family: 'PT Sans', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 1px; text-transform: capitalize; padding: 5px 10px 6px; border: none; border-radius: 3px; position: relative; z-index: 1; transition: all 0.4s ease 0s; } .btn:focus{ color: #fff; } .btn:hover{ color: #333; background: #fcfcfc; padding-left: 40px; box-shadow: 4px 4px 0 0 #f41a1a; } .btn:before, .btn:after{ content: ''; background-color: #f41a1a; width: 2px; height: 100%; transform: translateY(-50%); position: absolute; left: 0; top: 50%; z-index: -1; transition: all 0.4s ease 0s; } .btn:after{ background-color: transparent; height: 10px; width: 10px; border: 2px solid #f41a1a; border-bottom: none; border-left: none; opacity: 0; transform: translateY(-50%) rotate(45deg); } .btn:hover:before{ transform: translateY(-50%) rotate(90deg); height: 50%; left: 15px; } .btn:hover:after{ opacity: 1; left: 15px; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 20px; } }