Reputation: 313
I want to put a white background under an icon font that has a transparent part, so that part will change color on hover:
I tried with border-radius and with clip path. But still the white outline is showing. Even tried to make a smaller background. Doesn't work:
My css:
.icon-tw-blue {
color:white;
border-radius:30px;
transition: all 0.5s
}
.icon-tw-blue:hover {
border-radius: 50%;
color:#6ab8f1;
background-color:white;
}
HTML
<li class="li-social">
<a aria-label="Site Twitter" href="https://twitter.com/test" target="_blank">
<span class="icon-tw-blue" aria-hidden="true"></span>
</a>
</li>
Upvotes: 0
Views: 470