Comment ajouter un bouton avec une bordure dégradée à votre site Web-Questions et réponses sur le réseau chinois PHP

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

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