Author: | bedimcode |
---|---|
Views Total: | 194 views |
Official Page: | Go to website |
Last Update: | July 18, 2022 |
License: | MIT |
Preview:

Description:
A magic motion action button that slightly moves 3D geometric shapes on hover. Built with plain HTML and CSS/CSS3.
How to use it:
1. Add 3D geometric shapes to the action button.
<a href="#" class="button"> <span class="button__text"> Action Button </span> <img src="assets/img/cone.png" alt="" class="button__cone"> <img src="assets/img/torus.png" alt="" class="button__torus"> <img src="assets/img/icosahedron.png" alt="" class="button__icosahedron"> <img src="assets/img/sphere.png" alt="" class="button__sphere"> </a>
2. Basic CSS styles for the action button.
.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; } .button:hover::after { opacity: 1; } .button:hover { transform: scale(1.3); }
3. Display the 3D geometric shapes on hover.
.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); }
4. Move the 3D geometric shapes.
.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); }