When building this website, I wanted to give certain links and buttons a little flair. While there are more effects-laden button solutions out there, they usually rely on extra Javascript. This solution is all CSS, using only pseudo elements attached to the links or buttons.
(Note that this will not work on <input type="submit"> buttons in forms as these do not accept internal content or pseudo elements. An alternative is to use <button type="submit">Submit</button>.)
...and this is how you do it:
button{ display: inline-block; border-radius: 2px; border: 1px solid red; color: red; margin: 0 10px; text-transform: uppercase; letter-spacing: 2px; position: relative; z-index: 1; overflow: hidden; transition: all 0.5s; text-decoration: none !important; padding: 10px 20px; margin-left: 0; background: transparent; &:focus{ outline: none; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.4); } &:before{ content: ""; display: block; position: absolute; width: 100%; height: 0; bottom: -50%; left: 0; background-color: red; transition: all 0.5s; z-index: -1; border-radius: 50%; } &:hover{ color: #fff; cursor: pointer; &:before{ height: 100%; border-radius: 0; bottom: 0; } } }