.link{ color: #333; font-family: 'Arima Madurai', cursive; font-size: 25px; font-weight: 600; line-height: 25px; text-transform: capitalize; display: inline-block; overflow: hidden; position: relative; z-index: 1; transition: all 0.4s ease 0.1s; } .link:hover, .link:focus{ color: #9a2ea0; } .link:before{ content: ''; background-color: #9a2ea0; height: 100%; width: 100%; transform: scale(0) skew(0); position: absolute; right: 0; top: 0; z-index: -1; transition: transform 0.3s ease 0s, opacity 0.3s ease 0.15s; } .link:hover:before{ transform: scale(1) skew(80deg); opacity: 0.1; } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }