Cutaway Indicator Check out this CodePen! Please enable JavaScript to view this CodePen. <button role="button" type="button">Hover Me</button> html, body { height: 100%; position: relative; } body { background-color: rebeccapurple; background-image: linear-gradient(transparent 0%, coral 100%); font: 400 normal 24px/2em sans-serif; } button { background-color: gray; color: white; display: block; overflow: visible; padding: 1em 2em 1em 1em; border: 0; position: absolute; top: 50%; left: 50%; text-decoration: none; font-weight: 600; transform: translate3d(-50%, -50%, 0); &:before, &:after { content: ""; width: 0; height: 0; border-right: 2.5em solid gray; position: absolute; right: 100%; transition: all .5s; } &:before { border-bottom: 3em solid transparent; top: 0; } &:hover:before, &:focus:before { border-right-color: rgba(green, .6); } &:after { border-top: 3em solid transparent; bottom: 0; } &:hover:after, &:focus:after { border-right-color: rgba(orange, .6); } } View Full Code 🗓 published on 04 December 2013 ⤴️ also on CodePen ( Details, Full ) 🔗 shorturl repc.co/c4TP1 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. I’ll Scratch Your Back, And Mine Too Blueberry Ale Mentioned this? Comments on CodePen All Posts Code Code Feed