Plantilla HTML básica con botón (español)

583 sergioarmijo30

Abrir en el editor Publica tu código

Plantilla HTML básica con botón (español)

Recomendado

21 August 2024

Plantilla de portafolio HTML creativo

24 August 2025

Blog de tecnología: Plantilla HTML de tecnología y software

10 November 2024

Formulario HTML CSS OTP

HTML

CSS

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;
}

Recomendado

Plantilla de portafolio HTML creativo

Blog de tecnología: Plantilla HTML de tecnología y software

Formulario HTML CSS OTP

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS