Rotating Button Border Animation On Hover Using HTML & CSS.


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.

rotating border animation.

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.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <div class="container">

        <div class="button_box">
            <div class="rotating_border_line">
            <button type="button">Click Here</button>





    padding: 0;
    margin: 0;
    font-family: sans-serif;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    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;
    width: 200px;
    height: 80px;
    background-color: #f2f2f2;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px auto;
    overflow: hidden;
    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 {
        transform: rotate(0deg);
        transform: rotate(360deg);
    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.

You may like:

Post a Comment


Share your thoughts.

Post a Comment (0)
To Top