BOTÓN

Abrir en el editor Publica tu código

Recomendado

9 September 2024

Ejemplo HTML de botón flotante de arcoíris

16 July 2025

body {
  background-color: darkslategray;
  display: flex;
}
.btn {
  display: grid;
  margin: 100px 20px;
  font-size: 4.2rem;
  padding: 1rem 2.5rem;
  border: none;
  outline: none;
  border-radius: 0.4rem;
  cursor: pointer;
  text-transform: uppercase;
  background-color: rgb(14, 14, 26);
  color: rgb(234, 234, 234);
  font-weight: 700;
  transition: 0.6s;
  box-shadow: 0px 0px 60px #1f4c65;
  -webkit-box-reflect: below 10px
    linear-gredient(to bottom, rgba(0, 0, 0, 0, 0), rgba(0, 0, 0, 0, 4));
}
.btn:active {
  scale: 0.92;
}
.btn2:hover {
  background: rgb(2, 29, 78);
  background: linear-gradient(270deg, #009245 0%, #fcee21 60%);
  color: rgb(4, 4, 38);
}
.btn1:hover {
  background: rgb(2, 29, 78);
  background: linear-gradient(270deg, #6d214f 0%, #18dcff 60%);
  color: rgb(4, 4, 38);
}
.btn3:hover {
  background: rgb(2, 29, 78);
  background: linear-gradient(270deg, #d4145a 0%, #fbb03b 60%);
  color: rgb(4, 4, 38);
}

BOTÓN

Recomendado

Botón de filtro SVG pegajoso

Ejemplo HTML de botón flotante de arcoíris

botón

HTML

CSS

JS

Recomendado

Botón de filtro SVG pegajoso

Ejemplo HTML de botón flotante de arcoíris

botón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS