.link{ color: #870079; font-family: 'Chakra Petch', sans-serif; font-size: 24px; font-weight: 600; line-height: 20px; text-transform: capitalize; display: inline-block; position: relative; z-index: 1; transition: all 0.35s ease 0s; } .link:focus, .link:hover{ color: #777; text-shadow: -3px 3px rgba(0,0,0,0.1); } .link:before{ content: ''; width: 100%; height: 100%; border: 1px solid #870079; opacity: 0; position: absolute; top: 0; right: 0; z-index: -1; transition: all 0.35s ease 0s; } .link:hover:before{ opacity: 0.3; top: 5px; right: 5px; } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }