Minimal rotating backdrop button hovers and click animation is a basic CSS animation effect where when the button hovers, the button’s background color changes, and when the button is clicked, it scales down slightly. This animation is implemented using CSS pseudo-elements and transitions. The ::selection pseudo-element is used to change the color of the text on the button when it is selected, and the :before and :after pseudo-elements are used to create the animation effect by manipulating the position and appearance of elements added to the button. The animation effect creates the visual impression of the button’s background rotating as the user interacts with it. In this article, we will see how to make a rotating backdrop effect on the button on hover and click effect animation which on toggle works as a minimal and normal button.
Approach: The following approach will be utilized to create the rotating backdrop button hover and click animation effect, which is described below:
- Make a button element.
- Style the body element with a black background and center the elements.
- Style button with a position as relative, font-size, font-weight, height and border-radius, and z-index, and ease transition.
- Style the button hover with color, cursor, and no border. For the click effect, we use the transform scale property on the button’s active state and lower the size of the button to make the click effect.
- Make two pseudo-element of the buttons, one to the top left other to the bottom right, and move it out of the main button at 50% distance using the translate property, here the overflow hidden property is crucial to hide these backdrop pseudo elements and put them behind the button label.
- Style the hover state of the pseudo button elements, and make them come inside the button with a rotating effect behind the label.
Example: This example illustrates the rotating backdrop button hover animation effect using CSS.
<!DOCTYPE html> <html>
<head>
<style>
body {
margin: 0;
padding: 0;
height: 40vh;
display: grid;
place-items: center;
background-color: #B3FFAE;
}
::selection {
color: white;
background-color: green;
}
button {
position: relative;
font-size: 18px;
font-weight: bold;
height: 45px;
padding: 10px 20px;
background: white;
overflow: hidden;
border-radius: 10px;
border: 2px solid;
color: #334b79;
z-index: 1;
transition: 0.5s all ease;
}
button:hover {
color: white;
cursor: pointer;
border: 0px;
}
button:active {
transform: scale(0.85);
}
button:before {
content: "";
width: 50%;
height: 100%;
margin: auto;
position: absolute;
top: 0%;
left: -50%;
top: -100%;
background: #379237;
transition: all 0.6s ease;
z-index: -1;
}
button:hover:before {
top: 0;
left: 0;
border: 0px;
transform: rotate(180deg);
}
button:after {
content: "";
width: 50%;
height: 100%;
margin: auto;
position: absolute;
top: 0%;
left: 100%;
top: 100%;
background: #54B435;
transition: all 0.6s ease;
z-index: -1;
}
button:hover:after {
top: 0;
left: 50%;
border: 0px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
Minimal rotating backdrop button
hover and click animation effect
</h2>
<button>Geek IN</button>
</body>
</html>
|
Output: