Circular Buttons Animation Concept

Developer
Fabrizio Bianchi
Size
2,674 Kb
Views
34,408
  1. Circular Buttons Animation Concept Previews
  2. Circular Buttons Animation Concept HTML Codes
  3. Circular Buttons Animation Concept CSS Codes

How do I make an circular buttons animation concept?

What is a circular buttons animation concept? How do you make a circular buttons animation concept? This script and codes were developed by Fabrizio Bianchi on 07 August 2022, Sunday.

Circular Buttons Animation Concept Previews
IQ Test

Circular Buttons Animation Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circular Buttons Animation Concept</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='close-back' id='button'> <div class='b1'></div> <div class='b2'></div> <div class='b3'></div> <div class='b4'></div>
</div>
<div class='next-back' id='button'> <div class='b1'></div> <div class='b2'></div> <div class='b3'></div> <div class='b4'></div>
</div>
<!-- * DEMO ONLY*/ -->
<h4>Circular Buttons Animation Concept</h4> <script src='http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script>
</body>
</html>

Circular Buttons Animation Concept - Script Codes CSS Codes

#button { background: #000; border-radius: 50%; cursor: pointer; height: 100px; width: 100px; position: absolute; top: calc(50% - 50px);
}
#button div { background: #FFFFFF; height: 4px; width: 40px; position: absolute; left: 11px; top: 48px; transition: all .3s ease-in-out; transform-origin: 38px 2px;
}
.close-back { left: calc(50% - 110px);
}
.close-back .b1 { transform: translateX(0) rotate(45deg);
}
.close-back .b2 { transform: translateX(0) rotate(135deg);
}
.close-back .b3 { transform: translateX(0) rotate(225deg);
}
.close-back .b4 { transform: translateX(0) rotate(315deg);
}
.close-back:hover .b1 { transform: translateX(-21px) rotate(135deg);
}
.close-back:hover .b2 { transform: translateX(-20px) rotate(180deg);
}
.close-back:hover .b3 { transform: translateX(-20px) rotate(180deg);
}
.close-back:hover .b4 { transform: translateX(-21px) rotate(225deg);
}
.next-back { left: calc(50% + 10px);
}
.next-back .b1 { transform: translateX(18px) rotate(0deg);
}
.next-back .b2 { transform: translateX(20px) rotate(45deg);
}
.next-back .b3 { transform: translateX(20px) rotate(315deg);
}
.next-back .b4 { transform: translateX(18px) rotate(360deg);
}
.next-back:hover .b1 { transform: translateX(-21px) rotate(135deg);
}
.next-back:hover .b2 { transform: translateX(-20px) rotate(180deg);
}
.next-back:hover .b3 { transform: translateX(-20px) rotate(180deg);
}
.next-back:hover .b4 { transform: translateX(-21px) rotate(225deg);
}
/* DEMO ONLY */
h4 { font-weight: 200; font-size: 13px; position: absolute; bottom: 20px; left: 20px; margin: 0; font-family: sans-serif; color: #000000; text-transform: uppercase;
}
Circular Buttons Animation Concept - Script Codes
Circular Buttons Animation Concept - Script Codes
Home Page Home
Developer Fabrizio Bianchi
Username fbrz
Uploaded August 07, 2022
Rating 4.5
Size 2,674 Kb
Views 34,408
Do you need developer help for Circular Buttons Animation Concept?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fabrizio Bianchi (fbrz) Script Codes
Name
CSS Only iPhone 6
8 bit spinner
Pull Menu - Menu Interaction Concept
Simple Responsive Text
Pure CSS One Div Weather Animated Icons
CSS 3D Bending Effect - Page Flip
3D Social Buttons Concept
Coolors Loader
Mobile App Pages Animation
CSS3 Only - Semantic Sandwich
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!