Attention Grabbing CTA Button Animation

Image: Attention Grabbing CTA Button Animation GIF

This pure CSS CTA microinteraction for a button was designed by Daniel Gonzalez. You have 2 small circles hovering the text and when you move the move over it, they expand to form a layered background for the text effectively converting it into a button.

If you are having trouble with the pen, try the archived copy on GitHub

Attention Grabbing Button Snippet

See the Pen UI Button Hover Effect #2 by Daniel Gonzalez (@dan10gc) on CodePen.0

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.