bouton Iranien

1,942 0 Boutons AmirAliAkrami Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

18 September 2024

Bouton de connexion

20 April 2026

Animation des CSS des boutons

26 October 2024

Bouton interrupteur de lumière sombre.

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

Comments 0

…