Neumorphic Button Orange - 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 Orange</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #ffe6cc; margin: 0; font-family: 'Arial', sans-serif; } .neumorphic-button-orange { background: #ffe6cc; 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-orange::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-orange:hover::before { top: -60%; left: -60%; width: 220%; height: 220%; } .neumorphic-button-orange span { z-index: 1; color: #555; font-size: 18px; font-weight: 600; display: inline-flex; align-items: center; } .neumorphic-button-orange span i { margin-right: 10px; font-size: 24px; color: #e67e22; animation: icon-pulse 1s infinite; } @keyframes icon-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .neumorphic-button-orange: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-orange"> <span><i class="fas fa-sun"></i>Neumorphic Orange</span> </button> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </body> </html>