Magic Animated Motion Button with HTML & CSS

Create a Magic Animated Motion Button that comes alive when you hover over it! This button features floating 3D shapes and a glowing effect - all with pure CSS. ✨

Magic Motion Button

✅

Success

No JavaScript required - just HTML and CSS!

🎯 What You'll Build

A button that when hovered will:

Scale up smoothly (1.3x size)
Show a glowing shadow underneath
Reveal 4 floating 3D shapes (cone, torus, icosahedron, sphere)
Create a magical floating animation effect

💬

Info

You'll need 4 geometric shape images. You can download free 3D icons or create your own.

📁 File Structure

project-folder/
├── index.html
├── styles.css
└── img/
    ├── cone.png
    ├── torus.png
    ├── icosahedron.png
    └── sphere.png

🏗️ HTML Code

html

<!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</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 Code

css

@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);
}

💡

Download Source Code

Need the complete project files with all images? Download the ready-to-use source code!

📥 Download Source Code

✨ How It Works

The Animation Breakdown

Initial State:

All 3D shapes are hidden (opacity: 0)
Shapes are positioned close to the button center
Glow shadow is invisible

On Hover:

Button scales to 1.3x using transform: scale(1.3)
Glow shadow appears - The ::after pseudo-element fades in with blur effect
Shapes fade in - Opacity changes from 0 to 1
Shapes float outward - Each shape moves in a different direction
Smooth transitions - All animations happen smoothly with CSS transitions

Key CSS Properties Used

Property	Purpose
`transform: scale()`	Makes button bigger
`transform: translate()`	Moves shapes outward
`opacity`	Fades shapes in/out
`filter: blur()`	Creates soft glow
`transition`	Smooth animations

🎨 Customization Options

Change Colors

css

:root {
  --first-color: hsl(330, 75%, 80%);  /* Pink theme */
  --body-color: hsl(330, 100%, 95%);
}

Adjust Speed

css

.button {
  transition: .6s;  /* Slower */
}

Change Text

html

<span class="button__text">Start</span>

🐛 Troubleshooting

⚠️

Warning

Images not showing? Check file paths and ensure images are in the img folder.

Animations not working? Verify CSS is linked and class names are correct.

🎉 Conclusion

You've created a magical animated button with pure CSS! This demonstrates how powerful CSS animations can be. Experiment with colors, speeds, and shapes to make it your own!

Happy Coding! ✨

Need help? 📧 flemuxstudio@gmail.com | 📞 +91 62899 98072

Written by: Anirban Das | Flemux Studio 🚀