Hotline: +84 945 606 689

Home/eCommerce Talk/Magento/Magento 2/UX/UI Design/Wordpress/Make your site more exciting with background gradient hover animation effects
make your site more exciting with gradient animation Jun 05

Make your site more exciting with background gradient hover animation effects

If you are looking for some modern buttons for your site, these gradient buttons in pure CSS by Gianluca Pirrera might be just the thing for you. You can change the direction of the background change in the :hover state.

If you are having trouble with the pen, try the archived copy on GitHub. See one you’d like to try?

Hover effects Css
Sweep To Top .sweep-to-top{
background: linear-gradient(to bottom,#01aae9 50%, #eee 50%) no-repeat scroll right bottom / 100% 210% #eee;}
.sweep-to-top:hover{
background-position: right top;
color: @lightcolor;
}
Sweep To Right .sweep-to-top{
background: linear-gradient(to right, #01aae9 50%, #eee 50%) no-repeat scroll top right / 210% 100% #eee;
.sweep-to-top:hover{
background-position: left;
}
Sweep To Bottom .sweep-to-top{
background: linear-gradient(to top, #01aae9 50%,#eee 50%) no-repeat scroll right top / 100% 210% #eee;
.sweep-to-top:hover{
background-position: right bottom;
}
Sweep To Left .sweep-to-top{
background: linear-gradient(to left, #01aae9 50%, #eee 50%) no-repeat scroll top left / 210% 100% #eee;
.sweep-to-top:hover{
background-position: right;
color: @lightcolor;
}
Hover me .gradient-button{
background-size: 200% auto;
color: #fff;
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
.sweep-to-top:hover{
background-position: right center;
color: @lightcolor;
}

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>