Button using css
A simple HTML, CSS button with hover effect.
![Button using css](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fdtlyikoh%2Fproduction%2Ffdfdaa989dd761d59a7fa7a23d6f015b45efbe23-2800x1750.png%3Ffit%3Dmax%26auto%3Dformat&w=96&q=75)
.button { display: inline-block; border-radius: 7px; border: none; background: #1875FF; color: white; font-family: inherit; text-align: center; font-size: 13px; box-shadow: 0px 14px 56px -11px #1875FF; width: 10em; padding: 1em; transition: all 0.4s; cursor: pointer;}.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.4s;}.button span:after { content: 'for free'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.7s;}.button:hover span { padding-right: 3.55em;}.button:hover span:after { opacity: 4; right: 0;}