Mon. Jun 2nd, 2025

sarveshpathak.com

Code Snippets, Tutorials, Articles, Technical Stuff

How to Create a button with an advanced hover effect

5 min read
5 years ago Admin
How to Create a button with an advanced hover effect

How to Create a button with an advanced hover effect

If you want to give your HTML button a little twist, putting CSS with javascript button hover effects is ideal. It will help improve your visitors’ dwell time. The animated buttons will encourage visitors to see what your site has to offer and makes your page more dynamic. It also boosts your brand reputation.

Here we will learn to create a How to Create a button with an advanced hover effect the help of CSS Javascript and HTML

HTML button with an advanced hover effect

view source
print?
1<h1>How to Create a button with an advanced hover effect</h1>
2<button class="buttondiv">I am Simple</button>
3<button class="buttondiv alternative">I am Playful hover! Button</button>
4<button class="buttondiv simple"> I am So Simple</button>

CSS to create button with an advanced hover effect

view source
print?
1.buttondiv.alternative {
2  --color-hover: #2B3044;
3  --background: #362A89;
4  --hover-back: #6D58FF;
5  --hover-front: #F6F8FF;
6}
7.buttondiv.simple {
8  --background: #275EFE;
9  --background-hover: #1749DB;
10}
11 
12.buttondiv {
13  --color: #fff;
14  --color-hover: var(--color);
15  --background: #2B3044;
16  --background-hover: var(--background);
17  --hover-back: #6D58FF;
18  --hover-front: #5C86FF;
19  padding: 8px 28px;
20  border-radius: 20px;
21  line-height: 24px;
22  font-size: 14px;
23  font-weight: 600;
24  letter-spacing: .02em;
25  border: none;
26  outline: none;
27  position: relative;
28  overflow: hidden;
29  cursor: pointer;
30  -webkit-appearance: none;
31  -webkit-tap-highlight-color: transparent;
32  -webkit-mask-image: -webkit-radial-gradient(white, black);
33  color: var(--c, var(--color));
34  background: var(--b, var(--background));
35  -webkit-transition: color 0.2s linear var(--c-d, 0.2s), background 0.3s linear var(--b-d, 0.2s);
36  transition: color 0.2s linear var(--c-d, 0.2s), background 0.3s linear var(--b-d, 0.2s);
37}
38.buttondiv:not(.simple):before, .buttondiv:not(.simple):after {
39  content: '';
40  position: absolute;
41  background: var(--pb, var(--hover-back));
42  top: 0;
43  left: 0;
44  right: 0;
45  height: 200%;
46  border-radius: var(--br, 40%);
47  -webkit-transform: translateY(var(--y, 50%));
48          transform: translateY(var(--y, 50%));
49  -webkit-transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
50  transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
51  transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s);
52  transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
53}
54.buttondiv:not(.simple):after {
55  --pb: var(--hover-front);
56  --d: .44s;
57}
58.buttondiv div {
59  z-index: 1;
60  position: relative;
61  display: -webkit-box;
62  display: flex;
63}
64.buttondiv div span {
65  display: block;
66  -webkit-backface-visibility: hidden;
67          backface-visibility: hidden;
68  -webkit-transform: translateZ(0);
69          transform: translateZ(0);
70  -webkit-animation: var(--name, none) 0.7s linear forwards 0.18s;
71          animation: var(--name, none) 0.7s linear forwards 0.18s;
72}
73.buttondiv.in {
74  --name: move;
75}
76.buttondiv.in:not(.out) {
77  --c: var(--color-hover);
78  --b: var(--background-hover);
79}
80.buttondiv.in:not(.out):before, .buttondiv.in:not(.out):after {
81  --y: 0;
82  --br: 5%;
83}
84.buttondiv.in:not(.out):after {
85  --br: 10%;
86  --d-d: .02s;
87}
88.buttondiv.in.out {
89  --name: move-out;
90}
91.buttondiv.in.out:before {
92  --d-d: .06s;
93}
94 
95@-webkit-keyframes move {
96  30%,
97    36% {
98    -webkit-transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
99            transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
100  }
101  50% {
102    -webkit-transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
103            transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
104  }
105  70% {
106    -webkit-transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
107            transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
108  }
109}
110 
111@keyframes move {
112  30%,
113    36% {
114    -webkit-transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
115            transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
116  }
117  50% {
118    -webkit-transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
119            transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
120  }
121  70% {
122    -webkit-transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
123            transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
124  }
125}
126@-webkit-keyframes move-out {
127  30%,
128    36% {
129    -webkit-transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
130            transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
131  }
132  50% {
133    -webkit-transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
134            transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
135  }
136  70% {
137    -webkit-transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
138            transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
139  }
140}
141@keyframes move-out {
142  30%,
143    36% {
144    -webkit-transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
145            transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
146  }
147  50% {
148    -webkit-transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
149            transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
150  }
151  70% {
152    -webkit-transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
153            transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
154  }
155}
156html {
157  box-sizing: border-box;
158  -webkit-font-smoothing: antialiased;
159}
160 
161* {
162  box-sizing: inherit;
163}
164*:before, *:after {
165  box-sizing: inherit;
166}
167 
168body {
169  min-height: 100vh;
170  display: -webkit-box;
171  display: flex;
172  font-family: 'Inter UI', 'Inter', Arial;
173  -webkit-box-pack: center;
174          justify-content: center;
175  -webkit-box-align: center;
176          align-items: center;
177  background: #E1E6F9;
178}
179@media (max-width: 440px) {
180  body {
181    -webkit-box-orient: vertical;
182    -webkit-box-direction: normal;
183            flex-direction: column;
184  }
185}
186body .buttondiv {
187  display: block;
188  margin: 0 8px;
189}
190body .buttondiv:first-child {
191  margin-left: 0;
192}
193body .buttondiv:last-child {
194  margin-right: 0;
195}
196@media (max-width: 440px) {
197  body .buttondiv {
198    margin: 8px 0;
199  }
200}
201body .dribbble {
202  position: fixed;
203  display: block;
204  right: 20px;
205  bottom: 20px;
206}
207body .dribbble img {
208  display: block;
209  height: 28px;
210}
211body .twitter {
212  position: fixed;
213  display: block;
214  right: 64px;
215  bottom: 14px;
216}
217body .twitter svg {
218  width: 32px;
219  height: 32px;
220  fill: #1da1f2;
221}

Javascript

view source
print?
1document.querySelectorAll('.buttondiv').forEach(button => {
2 
3    let div = document.createElement('div'),
4        letters = button.textContent.trim().split('');
5 
6    function elements(letter, index, array) {
7 
8        let element = document.createElement('span'),
9            part = (index >= array.length / 2) ? -1 : 1,
10            position = (index >= array.length / 2) ? array.length / 2 - index + (array.length / 2 - 1) : index,
11            move = position / (array.length / 2),
12            rotate = 1 - move;
13 
14        element.innerHTML = !letter.trim() ? '&nbsp;' : letter;
15        element.style.setProperty('--move', move);
16        element.style.setProperty('--rotate', rotate);
17        element.style.setProperty('--part', part);
18 
19        div.appendChild(element);
20 
21    }
22 
23    letters.forEach(elements);
24 
25    button.innerHTML = div.outerHTML;
26 
27    button.addEventListener('mouseenter', e => {
28        if(!button.classList.contains('out')) {
29            button.classList.add('in');
30        }
31    });
32 
33    button.addEventListener('mouseleave', e => {
34        if(button.classList.contains('in')) {
35            button.classList.add('out');
36            setTimeout(() => button.classList.remove('in', 'out'), 950);
37        }
38    });
39 
40});

Result: How to Create a button with an advanced hover effect

How to Create a button with an advanced hover effect
How to Create a button with an advanced hover effect

Download Sourse Code

View More CSS Examples

About Post Author

How to Create a button with an advanced hover effect 2

Admin

See author's posts

More Stories

How to create interactive bootstrap card hover effects 3 min read

How to create interactive bootstrap card hover effects

3 years ago Admin
How to Create Seamless Scrolling Background using CSS 1 min read

How to Create Seamless Scrolling Background using CSS

3 years ago Admin
Create Advance Text Animation using CSS and HTML 6 min read

Create Advance Text Animation using CSS and HTML

3 years ago Admin

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.