BOUTON

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

9 December 2024

Bouton HTML léger avec icône et texte

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

BOUTON

Recommandé

Bouton de survol

Animation de bouton au survol

Bouton HTML léger avec icône et texte

HTML

CSS

JS

Recommandé

Bouton de survol

Animation de bouton au survol

Bouton HTML léger avec icône et texte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS