So fügen Sie Ihrer Website eine Schaltfläche mit Verlaufsrahmen hinzu
<p>Mein Problem ist, dass die Schaltfläche sehr klein erscheint und ich die Höhe oder Breite unten ohne Wirkung anpasse. </p>
<p>Ich habe den Code mit Elementor in meine WordPress-Site eingegeben, ich habe einfach ein HTML-Widget gezogen und den Code unten eingefügt. </p>
<p>
<pre class="brush:css;toolbar:false;">.container {
Höhe: 100 Vh;
Breite: 100vw;
Anzeige: Flex;
rechtfertigen-Inhalt: Mitte;
align-items: center;
Hintergrundfarbe: weiß;
}
.btn {
Polsterung: 20px 60px;
Grenze: keine;
Gliederung: keine;
Position: relativ;
Z-Index: 1;
Randradius: 5px;
Hintergrund: linearer Farbverlauf (nach rechts, #00FFA3, #DC1FFF);
Cursor: Zeiger;
}
.btn::before {
Inhalt: "";
Position: absolut;
links: 1px;
rechts: 1px;
oben: 1px;
unten: 1px;
Randradius: 4px;
Hintergrundfarbe: weiß;
Z-Index: -1;
Übergang: 200 ms
}
.btn::after {
Inhalt: attr(data);
Schriftgröße: 16px;
Hintergrund: linearer Farbverlauf (nach links, #00FFA3, #DC1FFF);
-webkit-Hintergrundclip: Text;
Farbe: transparent;
Übergang: 200 ms
}
.btn:hover::before {
Deckkraft: 50 %;
oben: 0px;
rechts: 0px;
unten: 0px;
links: 0px;
}
.btn:hover::after{
Farbe weiß;
}
Körper .container {
Höhe: 10vh;
Breite: 20vw;
Anzeige: Flex;
rechtfertigen-Inhalt: Mitte;
align-items: center;
Hintergrundfarbe: weiß;
}
Körper .btn {
Polsterung: 20px 60px;
Grenze: keine;
Gliederung: keine;
Position: relativ;
Z-Index: 1;
Randradius: 5px;
Hintergrund: linearer Farbverlauf (nach rechts, #00FFA3, #DC1FFF);
Cursor: Zeiger;
}
body .btn::before {
Inhalt: "";
Position: absolut;
links: 1px;
rechts: 1px;
oben: 1px;
unten: 1px;
Randradius: 4px;
Hintergrundfarbe: weiß;
Z-Index: -1;
Übergang: 200ms;
}
body .btn::after {
Inhalt: attr(data);
Schriftgröße: 16px;
Hintergrund: linearer Farbverlauf (nach links, #00FFA3, #DC1FFF);
-webkit-Hintergrundclip: Text;
Farbe: transparent;
Übergang: 200ms;
}
body .btn:hover::before {
Deckkraft: 50 %;
oben: 0px;
rechts: 0px;
unten: 0px;
links: 0px;
}
body .btn:hover::after {
Farbe weiß;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<button class="btn" data="Klick mich"></button>
</div></pre>
</p>