button hover effect - Free Download Stylish Button Hover Effect With jQuery And CSS3

Free Download Stylish Button Hover Effect With jQuery And CSS3

By Posted on

This time I will share jQuery Plugin and tutorial about Stylish Button Hover Effect With jQuery And CSS3, hope it will help you in programming stack.

button hover effect - Free Download Stylish Button Hover Effect With jQuery And CSS3
File Size: 5.17 KB
Views Total: 1578
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A stylish button hover effect that animates the button text character by character on hover by using jQuery and CSS3 transitions & transforms.

See It In Action:

How to use it:

1. Create a button on the page.

view source
1 <a href="" class="button">
2   Button Text Here
3 </a>

2. The necessary CSS styles for the button & hover effect.

view source
001 .button {
002   --background: #275efe;
003   --text: #fff;
004   --font-size: 16px;
005   --duration: .44s;
006   --move-hover: -4px;
007   --shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32);
008   --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
009   --font-shadow: var(--font-size);
010   padding: 16px 32px;
011   font-family: 'Roboto';
012   font-weight: 500;
013   line-height: var(--font-size);
014   border-radius: 24px;
015   display: block;
016   outline: none;
017   text-decoration: none;
018   font-size: var(--font-size);
019   letter-spacing: .5px;
020   background: var(--background);
021   color: var(--text);
022   box-shadow: var(--shadow);
023   -webkit-transform: translateY(var(--y));
024           transform: translateY(var(--y));
025   transition: box-shadow var(--duration) ease, -webkit-transform var(--duration) ease;
026   transition: transform var(--duration) ease, box-shadow var(--duration) ease;
027   transition: transform var(--duration) ease, box-shadow var(--duration) ease, -webkit-transform var(--duration) ease;
028 }
029  
030 .button span {
031   display: flex;
032   overflow: hidden;
033   text-shadow: 0 var(--font-shadow) 0 var(--text);
034 }
035  
036 .button span i {
037   display: block;
038   -webkit-backface-visibility: hidden;
039           backface-visibility: hidden;
040   font-style: normal;
041   transition: -webkit-transform var(--duration) ease;
042   transition: transform var(--duration) ease;
043   transition: transform var(--duration) ease, -webkit-transform var(--duration) ease;
044   -webkit-transform: translateY(var(--m));
045           transform: translateY(var(--m));
046 }
047  
048 .button span i:nth-child(1) {
049   transition-delay: 0.05s;
050 }
051  
052 .button span i:nth-child(2) {
053   transition-delay: 0.1s;
054 }
055  
056 .button span i:nth-child(3) {
057   transition-delay: 0.15s;
058 }
059  
060 .button span i:nth-child(4) {
061   transition-delay: 0.2s;
062 }
063  
064 .button span i:nth-child(5) {
065   transition-delay: 0.25s;
066 }
067  
068 .button span i:nth-child(6) {
069   transition-delay: 0.3s;
070 }
071  
072 .button span i:nth-child(7) {
073   transition-delay: 0.35s;
074 }
075  
076 .button span i:nth-child(8) {
077   transition-delay: 0.4s;
078 }
079  
080 .button span i:nth-child(9) {
081   transition-delay: 0.45s;
082 }
083  
084 .button span i:nth-child(10) {
085   transition-delay: 0.5s;
086 }
087  
088 .button span i:nth-child(11) {
089   transition-delay: 0.55s;
090 }
091  
092 .button:hover {
093   --y: var(--move-hover);
094   --shadow: var(--shadow-hover);
095 }
096  
097 .button:hover i {
098   --m: calc(var(--font-size) * -1);
099 }
100  
101 .button.reverse {
102   --font-shadow: calc(var(--font-size) * -1);
103 }
104  
105 .button.reverse:hover i {
106   --m: calc(var(--font-size));
107 }

3. Load the necessary jQuery JavaScript library in the document.

view source
1 <script src="/path/to/jquery.min.js"></script>

4. The jQuery script to enable the button hover effect.

view source
1

Share this:

Related posts: