In this article we going to make button hover effects which rotates border using html and CSS. I have already shared some CSS button hover effects. In this blog post we going to make hover effects on button when hover on button the button border rotates and when hover out the border stop rotating or it pauses the rotation.
It's simple to make this rotating border with animation. Actually, there is no border rotating. It’s a div tag behind the button that rotates which looks like border (border of button).
Video Tutorial of Rotating Border Animation.
Rotate Button Border on Hover (animation).
Its easy to make this button with rotating border. So first of all, that’s not the border that rotates it’s a div tag rotates behind the button. And we going to rotates that div tag with key frames.
Here below is the final code for this simple button with rotating border on hover.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h3>Button</h3>
<div class="button_box">
<div class="rotating_border_line">
</div>
<button type="button">Click Here</button>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
}
.container{
width: 500px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
box-shadow: 0px 10px 30px -15px blue;
}
.container h3{
font-size: 40px;
text-align: center;
margin-bottom: 50px;
}
.button_box{
width: 200px;
height: 80px;
background-color: #f2f2f2;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
margin: 0px auto;
overflow: hidden;
}
.rotating_border_line{
width: 200px;
height: 40px;
background: linear-gradient(45deg , #e94cdc , #4c28e4);
rotate: -30deg;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: paused;
}
.button_box:hover .rotating_border_line{
animation-play-state: running;
}
@keyframes rotate {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
button{
position: absolute;
width: 190px;
height: 70px;
border-radius: 100px;
font-size: 25px;
border: none;
background-color: #fff;
font-weight: bold;
cursor: pointer;
}
You can see demo in above YouTube video.
So that’s how you can create button with rotating border on hover and pause the rotation on hover out. If you have any query or suggestion you can write in comment section.
- How to create button hover effects using CSS.
- How to create a button when hover its background color changes with animation.
- Different css hover effects on button border hover.
- How to create tool tip. A text appears on hover.
- How to create a mouse tail on hover on document using HTML, CSS and JavaScript.
- How to change button text with sliding animation using HTML, CSS and JavaScript.
Share your thoughts.