Social Icon Buttons with Rotating Animation using HTML and CSS.

Hey Friends, Today in this article we'll learn how can we create awesome rotating buttons using HTML & CSS. Earlier I shared a blog on how to create a game using python. Now I'm going to create Social Icon Buttons with Rotating Animation.

Button refers to any graphical control element that gives a command to trigger an event, like searching for a question in a search engine or to associated with dialog boxes, like confirming an action. If the action is to create, edit, delete, or anything else to any piece of information, there is also a use of a button.

In this program, we'll be having some buttons when we hover on the button will rotate from 0 degrees to 360 degrees after rotating to 360 degrees it will stop rotating. This type of button you must have seen on codepen.

Social Icon Buttons with Rotating Animation {Source Code}

To create this Program (Social Icon Buttons with Rotating Animation). You will have to create two files first is index.html and the second is style.css after creating these files simply paste this code into that files.

Here is the HTML File Code

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Icon Buttons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
</head>

<body>
<div class="container">
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-whatsapp"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-telegram"></i></a></li>
</ul>
</div>
</body>

</html>

Here is the CSS File Code

.container {
position: absolute;
top: 50%;
left: 50%;
width: 30em;
height: 18em;
margin-top: -9em;
margin-left: -15em;
text-align: center;
vertical-align: middle;
line-height: 17em;
}

.container ul li {
text-decoration: none;
list-style: none;
transition: all 0.2s cubic-bezier(0, 0.01, 0, 1.31);
display: inline-block;
line-height: normal;
margin: 0px 18px;
border: 1px solid #cecccc;
padding: 0.5rem;
border-radius: 6%;
width: 30px;
height: 30px;
padding-bottom: 5px;
cursor: pointer;
}

.container ul li:hover,
.container ul li:hover a {
animation: codingyan 0.4s alternate ease-in-out;
}

@keyframes codingyan {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

.container ul li a {
font-size: 25px;
}

.container .fa-facebook {
color: #1877f2;
}

.container .fa-whatsapp {
color: #25d366;
}

.container .fa-telegram {
color: #0088cc;
}

.container .fa-twitter {
color: #1da1f2;
}

Social Icon Buttons with Rotating Animation using HTML and CSS.

You Might Like This:

Social Icon Buttons with Rotating Animation {Source Code}

Please Comment Down Your Feedback

Thanks For Visiting our Blog

Post a Comment

Contact form