Comment ajouter un bouton avec une bordure dégradée à votre site Web

Question

Mon problème est que le bouton apparaît très petit et j'ajuste la hauteur ou la largeur en dessous sans aucun effet.

J'ai entré le code dans mon site WordPress à l'aide d'Elementor, j'ai simplement fait glisser un widget HTML et collé le code ci-dessous.

.container {
  hauteur : 100vh ;
  largeur : 100vw ;
  affichage : flexible ;
  justifier-contenu : centre ;
  align-items : centre ;
  couleur de fond : blanc ;
}
.btn {
  remplissage : 20px 60px ;
  bordure : aucune ;
  contour : aucun ;
  position : relative ;
  indice z : 1 ;
  rayon de bordure : 5 px ;
  arrière-plan : dégradé linéaire (à droite, #00FFA3, #DC1FFF) ;
  curseur : pointeur ;
}
.btn::avant {
  contenu: "";
  position : absolue ;
  gauche : 1px ;
  à droite : 1px ;
  haut : 1px ;
  en bas : 1px ;
  rayon de bordure : 4 px ;
  couleur de fond : blanc ;
  indice z : -1 ;
  transition : 200 ms
}
.btn::après {
  contenu : attr (données);
  taille de police : 16 px ;
  arrière-plan : dégradé linéaire (à gauche, #00FFA3, #DC1FFF) ;
  -webkit-background-clip : texte ;
  couleur : transparent ;
  transition : 200 ms
}
.btn:hover::avant {
  opacité : 50 % ;
  haut : 0px ;
  à droite : 0px ;
  en bas : 0px ;
  gauche : 0px ;
}
.btn:hover::après{
  Couleur blanche;
}






corps .conteneur {
  hauteur : 10vh ;
  largeur : 20vw ;
  affichage : flexible ;
  justifier-contenu : centre ;
  align-items : centre ;
  couleur de fond : blanc ;
}

corps .btn {
  remplissage : 20px 60px ;
  bordure : aucune ;
  contour : aucun ;
  position : relative ;
  indice z : 1 ;
  rayon de bordure : 5 px ;
  arrière-plan : dégradé linéaire (à droite, #00FFA3, #DC1FFF) ;
  curseur : pointeur ;
}

corps .btn::avant {
  contenu: "";
  position : absolue ;
  gauche : 1px ;
  à droite : 1px ;
  haut : 1px ;
  en bas : 1px ;
  rayon de bordure : 4 px ;
  couleur de fond : blanc ;
  indice z : -1 ;
  transition : 200 ms ;
}

corps .btn :: après {
  contenu : attr (données);
  taille de police : 16 px ;
  arrière-plan : dégradé linéaire (à gauche, #00FFA3, #DC1FFF) ;
  -webkit-background-clip : texte ;
  couleur : transparent ;
  transition : 200 ms ;
}

corps .btn:hover::avant {
  opacité : 50 % ;
  haut : 0px ;
  à droite : 0px ;
  en bas : 0px ;
  gauche : 0px ;
}

corps .btn:hover::après {
  Couleur blanche;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="container">
  <button class="btn" data="Cliquez-moi"></button>
</div>

Answer 1

J'ai rendu le bouton plus grand que l'original sur votre page (il suffit d'écrire la hauteur et la largeur en .btn).

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.btn {
  padding: 20px 60px;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
  border-radius: 5px;
  background: linear-gradient(to right, #00FFA3, #DC1FFF);
  cursor: pointer;
  width: 550px;
  #do width height: 150px;
  # do height
}

So good day;
) .btn::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-radius: 4px;
  background-color: white;
  z-index: -1;
  transition: 200ms
}

.btn::after {
  content: attr(data);
  font-size: 16px;
  background: linear-gradient(to left, #00FFA3, #DC1FFF);
  -webkit-background-clip: text;
  color: transparent;
  transition: 200ms
}

.btn:hover::before {
  opacity: 50%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn:hover::after {
  color: white;
}

<div class="container">
  <button class="btn" data="点击我"></button>
</div>