BOTÓN

479 mambetov1237.b

Abrir en el editor Publica tu código

Recomendado

30 January 2025

Botones con gradiente al pasar el mouse

23 March 2025

Resplandor al pasar el cursor sobre el botón

20 October 2024

Botón de degradado CSS

HTML

CSS

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

Recomendado

Botones con gradiente al pasar el mouse

Resplandor al pasar el cursor sobre el botón

Botón de degradado CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS