circle background CTA, custom hover states.

[cives]

Hi all – please reference the attached screenshots.

In a nutshell, I am trying to achieve a CTA with a circle border, and on hover an offset fill. This was originally achieved with:

display: inline-block;
line-height: 100px;
text-decoration: none;
background-image: radial-gradient(circle, transparent 0%, #fecb4f 50%, transparent 0%);
background-position: 50% 60%;
background-size: 95px 95px;
background-repeat: no-repeat;
opacity: .6;
font-size: 1.5em;
z-index:100 !important;
color:#fecb4f !important;

This solution was great, but limits what hover states you can use… Any other suggestions?

Thanks!

[Paulie_D]

Like this?

https://codepen.io/Paulie-D/pen/wpKojY

[cives]

That looks great! Thanks!

[Author]

Posts