Outline text filling color on hover effect

outline text solid color hover

Make your text look fancy with outline effect. Extend further by displaying outlined text in solid color on the hover action.

Live Preview

Sample Text

Step 1

Add class vc-text-5 to your text element. If using manual text, then following markup should work.

<p class="vc-text-5">Sample Text</p>

Step 2

Add the following CSS code

.vc-text-5 {
   text-decoration: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: thin #000;
   font-size:  80px !important;
   font-family: arial, sans-serif;
}
.vc-text-5:hover {
  -webkit-text-fill-color: #000;
}

In the above code, you can change font size, font type, and color as per requirements. To use text only as outline without hover, just remove the “hover” part in the above code.

💬 Subscribe for Free, for more CSS magic.
.
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login

Leave a Comment

Your email address will not be published. Required fields are marked *