Button hover effects are used to indicate mouse over the button by using some style change. Hover Effects can be as simple as a change in background-color, opacity, or scale. These changes, combined with smooth transitions, produce beautiful effects. We use the ‘: hover’ pseudo-class to implement hover effects in CSS. Even though employing this pseudo-class might look complicated at first, they are pretty simple. In today’s tutorial, we create a wiggle hover effect. This Jelly buttons combined with the wiggle effect are not only captivating but also super-easy to create. So let us dive in.
HTML
We get started by creating a div with the class name ‘container’. As you have seen in previous tutorials, the only purpose for using this container is to wrap and center the content. In this case, it centers and spaces the three buttons. Next, we create three buttons, each with the text ‘JELLY’. You can go on and change it to the text of your choice. And the layout is now ready.
<div class="container">
<button>JELLY</button>
<button>JELLY</button>
<button>JELLY</button>
</div>
CSS
Styling the Document Body:
The buttons look dull and tedious at this point. Let’s add some CSS styling to make them look attractive. We begin by setting up the background color of the document body to dark blue color with hex-code ‘#273046’. Also, we do not need the default margin and padding, so we get rid of them by setting them to zero each.
body{
background-color: #273046;
padding: 0;
margin: 0;
overflow: hidden;
}
Using Flex Layout to Center and Space Buttons:
The container dimensions stretch over the height and width of the viewport. We use ‘align-items’ to center the buttons vertically. Similarly, we use ‘justify-content’ to space the buttons horizontally inside the container.
.container{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: space-around;
}
Styling the Buttons:
Now that we have the document body styled let us move on to the button. To style the buttons, we set the height and width of each of them to 80 pixels and 200 pixels, respectively. You can play around and change the dimensions as per your needs. We then set the border to ‘none’. A blue outline appears every time we click the button. We can get rid of this by using a value of ‘none’ for the ‘outline’ attribute. Now, we set the text color of each button to white. The font-family we use here is ‘Montserrat’. We assign a value of ‘pointer’ to the ‘cursor’ attribute, indicating that the button is clickable.
button{
height: 80px;
width: 200px;
border: none;
outline: none;
color: white;
font-size: 30px;
font-family: 'Montserrat',sans-serif;
position: relative;
cursor: pointer;
}
Adding Background Color to each button:
Next, We set background color for each of the three buttons. We have used the ‘nth-child(n)’ selector for this purpose. It selects the ‘nth’ child of the parent.
button:nth-child(1){
background-color: #fe2636;
}
button:nth-child(2){
background-color: #f5dd33;
}
button:nth-child(3){
background-color: #90eb35;
}
Creating the shine:
We now have to create the shine on the button. It appears as the light reflects off the button; thereby, giving the button a glossier look. The trick here is not to use any additional elements to create the shine. Instead, we make use of the pseudo-elements ‘before’ and ‘after’. Each of these pseudo-elements has a background color of white with an opacity of ‘0.4’. Do not forget to add the ‘content’ attribute to each of the pseudo-elements.
button:before,button:after{
position: absolute;
content: '';
background-color: rgba(255,255,255,0.4);
}
button:before{
height: 55px;
width: 7px;
left:10px;
bottom: 5px;
border-radius: 7px;
}
button:after{
height: 7px;
width: 7px;
border-radius: 50%;
bottom: 65px;
left:10px;
}
Adding the hover state:
Now that we have styled the buttons, we have to add the hover effect. For that, we use the pseudo-class ‘hover’. Add animation to the button on the hovered state. We name the animation ‘wiggle’ with a short animation duration of ‘0.6s’ seconds, allowing quick transitions.
button:hover{
animation: wiggle 0.6s;
}
Specifying the keyframes:
We now add keyframes. The button scales up and down quickly, both horizontally and vertically to create the wiggle effect. Now that we successfully defined the keyframes rule, our Jelly button is ready with the engaging wiggle effect.
@keyframes wiggle{
25%{
transform: scale(0.8,1.3);
}
50%{
transform: scale(1.1,0.8);
}
75%{
transform: scale(0.7,1.2);
}
}
So did you enjoy creating this fun little hover effect? Do let me know in the comments below. Also, you can subscribe to my Youtube or follow me on Instagram to stay updated with the latest tutorials.
I seee