WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
निऑन बटन
1159
tousgreg
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
1
अनुशंसित
31 January 2025
बटन ईरानी
28 October 2025
HTML बटन होवर प्रभाव उदाहरण
21 October 2024
जुगनू बटन
HTML
Copy
Boutons Néon
Cyan
Magenta
Jaune
Vert
Rouge
Bleu
CSS
Copy
body { background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .button-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .neon-button { font-family: 'Arial', sans-serif; font-size: 18px; color: #fff; background: none; border: 2px solid; padding: 12px 24px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s ease-in-out; } /* Boutons par couleur */ .cyan { border-color: #0ff; box-shadow: 0 0 10px #0ff, 0 0 20px #0ff; } .cyan:hover { background-color: #0ff; color: #000; box-shadow: 0 0 20px #0ff, 0 0 40px #0ff; } .magenta { border-color: #f0f; box-shadow: 0 0 10px #f0f, 0 0 20px #f0f; } .magenta:hover { background-color: #f0f; color: #000; box-shadow: 0 0 20px #f0f, 0 0 40px #f0f; } .yellow { border-color: #ff0; box-shadow: 0 0 10px #ff0, 0 0 20px #ff0; } .yellow:hover { background-color: #ff0; color: #000; box-shadow: 0 0 20px #ff0, 0 0 40px #ff0; } .green { border-color: #0f0; box-shadow: 0 0 10px #0f0, 0 0 20px #0f0; } .green:hover { background-color: #0f0; color: #000; box-shadow: 0 0 20px #0f0, 0 0 40px #0f0; } .red { border-color: #f00; box-shadow: 0 0 10px #f00, 0 0 20px #f00; } .red:hover { background-color: #f00; color: #000; box-shadow: 0 0 20px #f00, 0 0 40px #f00; } .blue { border-color: #00f; box-shadow: 0 0 10px #00f, 0 0 20px #00f; } .blue:hover { background-color: #00f; color: #fff; box-shadow: 0 0 20px #00f, 0 0 40px #00f; }
JS
Copy