Neumorphic Button Green - VexaX
Run Code
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>Neumorphic Button Green</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #e0f7ec; margin: 0; font-family: 'Arial', sans-serif; } .neumorphic-button-green { background: #e0f7ec; 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-green::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-green:hover::before { top: -60%; left: -60%; width: 220%; height: 220%; } .neumorphic-button-green span { z-index: 1; color: #555; font-size: 18px; font-weight: 600; display: inline-flex; align-items: center; } .neumorphic-button-green span i { margin-right: 10px; font-size: 24px; color: #2ecc71; animation: icon-spin 1s infinite linear; } @keyframes icon-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .neumorphic-button-green: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-green"> <span><i class="fas fa-leaf"></i>Neumorphic Green</span> </button> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </body> </html>