WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
बटन के साथ मूल HTML टेम्पलेट (स्पेनिश)
582
sergioarmijo30
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
21 August 2025
Huawei P70 Pro: अभी खरीदें, फीचर्स और स्पेसिफिकेशन (TR)
6 August 2025
Matter.js के साथ दिल के बुलबुले का एनीमेशन
1 September 2025
कोड स्निपेट के साथ CSS आई एनीमेशन
HTML
Copy
Sxrgxx
Hola
CSS
Copy
body{ display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #121212; margin: 0; } button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--border-width); border-radius: var(--border-radius); background-image: conic-gradient( #488cfb, #29dbbc, #ddf505, #ff9f0e, #e440bb, #655adc, #488cfb ); -webkit-mask-image: var(--m-i), var(--m-i); mask-image: var(--m-i), var(--m-i); -webkit-mask-origin: var(--m-o); mask-origin: var(--m-o); -webkit-mask-clip: var(--m-o); mask-composite: exclude; -webkit-mask-composite: destination-out; filter: hue-rotate(0); animation: rotate-hue linear 500ms infinite; animation-play-state: paused; } button:hover::after { animation-play-state: running; } @keyframes rotate-hue { to { filter: hue-rotate(1turn); } } button, button::after { box-sizing: border-box; } button:active { --border-width: 5px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */