Rotating Border Animation with CSS

Rotating Border Animation with CSS

In this tutorial we will see how to create Rotating Border Animation with CSS. We have used position property, ::before selector, transform property, animation property and CSS keyframes for this purpose.

Table of Contents

HTML Code

HTML Code is given below.

<div class="div">
   <a class="btn green">✔</a>
   <a class="btn purple">✉</a>
   <a class="btn red">✖</a>
</div>

CSS Code

CSS Code is given below.

body
{
    background-color: #eee;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.btn
{
    position: relative;
    font-weight: bold;
    font-size: 35px;
    display: inline-block;
    width: 55px;
    height: 55px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    margin: 0px 15px;
    color: #fff;
}
.btn::before
{
    position: absolute;
    content: '';
    width: 60px;
    height: 60px;
    z-index: -1;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: rotate 20s linear infinite;
}
.red
{
    background-color: #CA0B00;
}
.red::before
{
    border: 3px dashed #CA0B00;
}
.green
{
    background-color: #3AA132;
}
.green::before
{
    border: 3px dashed #3AA132;
}
.purple
{
    background-color: #8216B8;
}
.purple::before
{
    border:3px dashed #8216B8;
}
@keyframes rotate
{
    from
    {
    transform: translate(-50%,-50%) rotate(360deg);
    }
    to
    {
    transform: translate(-50%,-50%) rotate(-360deg);
    }
}

Demo

Check Demo

Video Tutorial

Watch video tutorial on Rotating Border Animation with CSS.

Tags