Neumorphism Button - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neumorphism Button</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #ecf0f3; margin: 0; font-family: 'Arial', sans-serif; } .neumorphic-button { background: #ecf0f3; border-radius: 50px; box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6), 5px 5px 15px rgba(0, 0, 0, .1), -5px -5px 15px rgba(255, 255, 255, .7); padding: 15px 30px; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .neumorphic-button::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0)); z-index: 0; transition: all 0.3s ease; } .neumorphic-button:hover::before { top: -60%; left: -60%; width: 220%; height: 220%; } .neumorphic-button span { z-index: 1; color: #555; font-size: 18px; font-weight: 600; display: inline-flex; align-items: center; } .neumorphic-button span i { margin-right: 10px; font-size: 24px; color: #ff4b2b; animation: icon-bounce 1s infinite; } @keyframes icon-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .neumorphic-button:active { box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.7); } </style> </head> <body> <button class="neumorphic-button"> <span><i class="fas fa-magic"></i>Neumorphic Button</span> </button> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </body> </html>