Hinzufügen von 3D-CSS-Druckschaltflächen in Weebly umfasst einige Schritte zur Codeanpassung im Abschnitt „Benutzerdefiniertes CSS“. So können Sie sie zu Ihrer Weebly-Site hinzufügen:

Schritt 1:Benutzerdefiniertes CSS erstellen

A. Klicken Sie im Weebly-Editor oben rechts auf „Einstellungen“.

B. Wählen Sie im linken Menü „SEO &Code“.

C. Klicken Sie auf die Registerkarte „Benutzerdefiniertes CSS“.

D. Fügen Sie den folgenden Code in das Feld „Benutzerdefiniertes CSS“ ein:

„

.btn {

Anzeige:Inline-Block;

Polsterung:15px 25px;

Schriftgröße:16px;

Textausrichtung:Mitte;

Textdekoration:keine;

Farbe:#fff;

Hintergrund:#3498db;

Grenze:keine;

Cursor:Zeiger;

}

.btn:hover,

.btn:aktiv {

Hintergrund:#2980b9;

}

.btn:aktiv {

transform:Skala(0,95);

}

„

Schritt 2:HTML-Element für die Schaltfläche hinzufügen

A. Ziehen Sie im Weebly-Editor ein „Embed Code“-Element per Drag &Drop auf Ihre Seite, wo die Schaltfläche erscheinen soll.

B. Fügen Sie den folgenden HTML-Code in das Feld „Code“ ein:

„

Klicken Sie auf mich

„

Schritt 3:Passen Sie die Schaltfläche an

Sie können die Schaltfläche anpassen, indem Sie die folgenden Eigenschaften im CSS-Code ändern:

A. `.btn {color:#fff; Hintergrund:#3498db;}` – Ändern Sie die Textfarbe und Hintergrundfarbe der Schaltfläche.

B. `.btn:hover, .btn:active { background:#2980b9;}` – Ändern Sie die Hover- und Aktivstatusfarbe der Schaltfläche.

Schritt 4:Vorschau und Veröffentlichung

A. Klicken Sie auf die Schaltfläche „Vorschau“, um zu sehen, wie die Schaltfläche auf Ihrer Website aussieht.

B. Wenn Sie mit den Ergebnissen zufrieden sind, klicken Sie auf „Veröffentlichen“, um die Änderungen live auf Ihrer Website zu übertragen.

Hinweis :Der bereitgestellte CSS-Code verwendet den Schaltflächentext „Click Me“. Sie können ihn im HTML-Code durch Ihren gewünschten Text ersetzen.

Wenn Sie diese Schritte befolgen, können Sie Ihrer Weebly-Site 3D-CSS-Druckschaltflächen hinzufügen, um deren Benutzererfahrung und visuelle Attraktivität zu verbessern.