Let’s build an Magic Animated Motion Button using HTML and CSS. This button will have smooth transitions and eye-catching animations that make it feel alive when hovered or clicked. It’s a perfect way to add a stylish and modern touch to your website’s UI.
We’ll use:
- HTML to create the button structure.
- CSS to design the look and add magic motion effects with transitions and animations.
This project is simple yet powerful, showing how creative CSS can transform a normal button into something engaging and interactive. ✨🔘
HTML :
This code creates a styled clickable button that shows the text “play” along with four shape images (cone, torus, icosahedron, sphere); the button is linked to a CSS file (styles.css) which controls its design and animations, making it look like a magic motion effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Magic Motion Button | @coding.stella</title>
</head>
<body>
<a href="#" class="button">
<span class="button__text"> play </span>
<img src="img/cone.png" alt="" class="button__cone" />
<img src="img/torus.png" alt="" class="button__torus" />
<img src="img/icosahedron.png" alt="" class="button__icosahedron" />
<img src="img/sphere.png" alt="" class="button__sphere" />
</a>
</body>
</html>
CSS :
This CSS styles the magic motion button: it sets colors, fonts, and layout, then gives the button a rounded shape with smooth transitions; when hovered, a glowing shadow appears (::after), the button scales up, and hidden 3D shape images (cone, torus, icosahedron, sphere) fade in and move outward with animations, creating a floating, dynamic 3D effect.
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&display=swap");
:root {
--first-color: hsl(217, 75%, 80%);
--body-color: hsl(211, 100%, 95%);
--body-font: 'Montserrat Alternates', sans-serif;
--normal-font-size: 1.25rem;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: grid;
place-items: center;
background-color: var(--body-color);
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
a {
text-decoration: none;
}
.button {
position: relative;
background-color: var(--first-color);
color: #fff;
padding: .9rem 2.20rem;
border-radius: 3rem;
transition: .4s;
}
.button::after {
content: '';
width: 80%;
height: 40%;
background: linear-gradient(80deg,
hsl(217, 80%, 80%) 10%,
hsl(217, 85%, 70%) 48%);
position: absolute;
left: 0;
right: 0;
bottom: -4px;
margin: 0 auto;
border-radius: 3rem;
filter: blur(12px);
z-index: -1;
opacity: 0;
transition: opacity .4s;
}
.button__text {
position: relative;
z-index: 10;
}
.button img {
position: absolute;
inset: 0;
margin: auto;
pointer-events: none;
transition: .6s;
opacity: 0;
}
/* Move 3D geometric elements */
.button__cone {
width: 18px;
transform: translate(-25px, -6px) rotate(55deg);
filter: blur(.5px);
}
.button__torus {
width: 38px;
transform: translate(7px, -14px) rotate(80deg);
}
.button__icosahedron {
width: 36px;
transform: translate(34px, -4px) rotate(-45deg);
filter: blur(.9px);
}
.button__sphere {
width: 30px;
transform: translate(-5px, 15px) rotate(40deg);
}
/* View shadow gradient */
.button:hover::after {
opacity: 1;
}
/* Button scale */
.button:hover {
transform: scale(1.3);
}
/* View 3D geometric elements */
.button:hover img {
opacity: 1;
}
.button:hover .button__cone {
transform: translate(-38px, -10px) scale(1.2);
}
.button:hover .button__torus {
transform: translate(7px, -32px) scale(1.1);
}
.button:hover .button__icosahedron {
transform: translate(50px, -20px) scale(1.1);
}
.button:hover .button__sphere {
transform: translate(-14px, 20px) scale(1.1);
}
In short, the Animated Magic Motion Button using HTML and CSS is a fun project to make your UI more attractive. With just a little styling and animation, you can create a button that truly stands out. 🚀
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
