Copy the following HTML Snippet into Text Area of any Elementor widget such as icon box widget, text editor widget or any widget with text in it.
<span class="da-coolstuff">Text</span>NOTE: Only for the text editor widget above HTML snippet needs to be copied into the text tab of the widget.
.da-coolstuff{
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
background-repeat: no-repeat;
background-size: 100% 0.2em;
background-position: 0 88%;
transition: background-size 0.25s ease-in, color 0.25s ease-in;
}
.da-coolstuff:hover {
background-size: 100% 88%;
filter: grayscale(50%);
color: white;
}