Button Interaction Demo Check out this CodePen! Please enable JavaScript to view this CodePen. <button role="button" type="button">Hello!</button> $black: #0d0d0d; $gray: #1d1d1d; $brand: #8cddff; $brand-alt: #f473ff; button { font-size: 4em; background: none; color: $brand; display: block; padding: .125em .25em; border: 0; position: relative; font-weight: 600; white-space: nowrap; text-decoration: none; &:before { content: ""; background-color: $black; width: 0; height: 100%; border-bottom: .125em solid rgba($brand, 0.6); border-radius: .0625em; position: absolute; top: 0; left: auto; right: 0; z-index: -1; transition: width .2s ease; } &:hover, &:focus, &:active { color: $brand-alt; outline: none; &:before { width: 100%; border-bottom-color: rgba($brand-alt, 0.6); left: 0; right: auto; } } } View Full Code 🗓 published on 18 May 2015 ⤴️ also on CodePen ( Details, Full ) 🔗 shorturl repc.co/c4bD1 code Have you published a response to this post?Learn how to send a Webmention or let me know the URL: You can also leave an anonymonous comment, thanks to Comment Parade. Responses Reactions: Replies: Please enable JavaScript to view Webmentions. Theming Pinboard Backscratching Revisited Mentioned this? Comments on CodePen All Posts Code Code Feed