Create this Button in Elementor - Absolute Beginner Tutorial - CSS

Published: 29 April 2024
on channel: DMmotionarts
253
11

Consider Subscribing and Liking to Support Me.

CSS Code :

Add class "btnText" to the button text. Make sure it is set to p and not h2,h3... etc.

.btnText {
transition: 0.3s;
color:black; /*Normal Color of Text*/
}

selector:hover .btnText{
color:white; /*Hover Color of Text*/
}


selector:after {

content: '';
height: 100%;
width: 22%; /*Size of the Colored Container*/
background: #9195F6;
position: absolute;
right: 0;
top: 0;
border-radius: 50px;
transition: width 0.3s;

}

selector:hover:after {
width: 100%; /*Size of the Full Container on Hover*/
}

Important Links -
Elementor Pro - https://be.elementor.com/visit/?bta=8...
Hostinger - https://www.hostg.xyz/SH1gP

Recommended hostings, plugins, themes and wordpress tools -
https://dmmotionarts.com/dms-recommen...
Free Elementor Templates - https://dmmotionarts.com/product-cate...

Some of the above links are affiliated links.

Thank you.


Watch video Create this Button in Elementor - Absolute Beginner Tutorial - CSS online without registration, duration hours minute second in high quality. This video was added by user DMmotionarts 29 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 253 once and liked it 11 people.