bouton Iranien

1148 AmirAliAkrami

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 August 2025

Exemple de boutons de contact HTML

18 February 2024

Bouton de confirmation

10 August 2025

Onglets HTML avec bouton Fermer

HTML

CSS

.container {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}
.container .btn {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 15px rgb(0 0 0 / 37%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgb(255 255 255 / 71%);
  border-radius: 30px;
  padding: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  color: #fff;
  font-weight: 400px;
  z-index: 1;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}
.container .btn:hover a {
  letter-spacing: 3px;
}
.container .btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translate(0);
  transition: 0.5s;
  filter: blur(0px);
}
.container .btn:hover a::before {
  transform: skewX(45deg) translate(200px);
}
.container .btn::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: -5px;
  width: 1px;
  height: 14px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}
.container .btn:hover::before /*lightup button*/ {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}

.container .btn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: -3px;
  width: 30px;
  height: 55px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}
.container .btn:hover::after /*lightup button*/ {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}
.container .btn:nth-child(1)::before, /*chnage 1*/
.container .btn:nth-child(1)::after {
  background: #da0000;
  box-shadow:
    0 0 5px #da0000,
    0 0 15px #da0000,
    0 0 30px #da0000,
    0 0 60px #da0000;
}
.container .btn:nth-child(2)::before, /* 2*/
.container .btn:nth-child(2)::after {
  background: #08ab26;
  box-shadow:
    0 0 5px #08ab26,
    0 0 15px #08ab26,
    0 0 30px #08ab26,
    0 0 60px #18ce39;
}

Recommandé

Exemple de boutons de contact HTML

Bouton de confirmation

Onglets HTML avec bouton Fermer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS