(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Tutorial Video:
Don’t want to make from scratch? Get the template instead 🙂
Introduction – Fancy Buttons are expand on hover
In this tutorial, we will create this animated hover buttons in Elementor with simple CSS.
Support by
using these links
(Affiliate)
COUPON CODE - DMmotionarts (10% off)
Fancy Buttons CSS Code
- –dmExpandColor1… : These are variables that store gradient colors. You can update to your colors or add even more options.
- If you added more color variables above, make sure to create the new CSS class at the bottom of the code (around line 202). Watch video to understand it better.
- dm-expand-button is the CSS class of the container that will act as button.
- dm-expand-button-icon is the CSS class of the icon added in button. If you don’t want to use buttons, then give this class to another widget that you used.
- dm-expand-button-text the CSS class of the text that is shown on hover.
- dm-expand-color1 …. : These are extra CSS classes that we add to the same container that has the CSS class dm-expand-button. If you added new variables for more colors as per point 1 above then you also need to create new CSS class. (Just look at the end codes after line 202).Â
- Watch video tutorial above to get more detailed explanation.
<style>
:root {
--dmExpandColor1: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
--dmExpandColor2: linear-gradient(90deg, #ff0080, #7928ca);
--dmExpandColor3: linear-gradient(90deg, #00c6ff, #0072ff);
--dmExpandColor4: linear-gradient(90deg, #f7971e, #ffd200);
--dmExpandColor5: linear-gradient(90deg, #11998e, #38ef7d);
}
/* Main Button */
.dm-expand-button {
width:75px;
height:75px;
border-radius:100px;
background:white;
transition:width 0.5s !important;
box-shadow:0px 0px 50px rgba(0,0,0,0.1) !important;
cursor:pointer;
}
/*Tablet*/
@media (max-width:1024px) {
.dm-expand-button {
width: 50px;
height: 50px;
}
}
/*Mobile*/
@media (max-width:767px) {
.dm-expand-button {
width: 50px;
height: 50px;
}
}
/* Hover Gradient */
.dm-expand-button:after {
content:'';
position:absolute;
inset:0;
border-radius:100px;
background:var(--dmExpandColor);
opacity:0;
transition:opacity 0.5s;
z-index:0;
}
/* Hover Glow */
.dm-expand-button:before {
content:'';
position:absolute;
inset:0;
border-radius:100px;
background:var(--dmExpandColor);
filter:blur(20px);
opacity:0;
transition:opacity 0.5s;
z-index:-1;
}
.dm-expand-button:hover:after {
opacity:1;
}
.dm-expand-button:hover:before {
opacity:0.5;
}
/* Expand */
.dm-expand-button:hover {
width:200px;
/*This one is needed to overwrite elementor default a link hover*/
transition:width 0.5s !important;
box-shadow:0px 0px 50px rgba(0,0,0,0) !important;
}
/*Tablet*/
@media (max-width:1024px) {
.dm-expand-button:hover {
width: 150px;
transition:width 0.5s !important;
}
}
/*Mobile*/
@media (max-width:767px) {
.dm-expand-button:hover {
width: 100px;
transition:width 0.5s !important;
}
}
/* Icon */
.dm-expand-button:hover .dm-expand-button-icon {
opacity:0;
}
/* Text */
.dm-expand-button-text {
opacity:0;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%) scale(0);
transition:opacity 0.5s, transform 0.5s;
z-index:3;
}
.dm-expand-button:hover .dm-expand-button-text {
opacity:1;
transform:translate(-50%, -50%) scale(1);
}
/* Color classes only */
.dm-expand-color1 {
--dmExpandColor:var(--dmExpandColor1);
}
.dm-expand-color2 {
--dmExpandColor:var(--dmExpandColor2);
}
.dm-expand-color3 {
--dmExpandColor:var(--dmExpandColor3);
}
.dm-expand-color4 {
--dmExpandColor:var(--dmExpandColor4);
}
.dm-expand-color5 {
--dmExpandColor:var(--dmExpandColor5);
}
</style>
