Heim  >  Fragen und Antworten  >  Hauptteil

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>
P粉621033928P粉621033928433 Tage vor561

Antworte allen(1)Ich werde antworten

  • P粉985686557

    P粉9856865572023-09-06 17:03:03

    我在你的页面上把按钮做得比原来大一些(只需在.btn上写入height和width)。

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

    Antwort
    0
  • StornierenAntwort