| 3D CSS-drukknoppen toevoegen in Weebly omvat een paar stappen voor het aanpassen van de code binnen de aangepaste CSS-sectie. Zo kunt u ze aan uw Weebly-site toevoegen:
Stap 1:aangepaste CSS maken
A. Klik in de Weebly-editor op "Instellingen" in de rechterbovenhoek.
B. Selecteer "SEO &Code" in het linkermenu.
C. Klik op het tabblad 'Aangepaste CSS'.
D. Plak de volgende code in het veld Aangepaste CSS:
```
.btn {
display:inline-blok;
opvulling:15px 25px;
lettergrootte:16px;
tekst uitlijnen:centreren;
tekstversiering:geen;
kleur:#fff;
achtergrond:#3498db;
rand:geen;
cursor:aanwijzer;
}
.btn:beweeg,
.btn:actief {
achtergrond:#2980b9;
}
.btn:actief {
transformeren:schaal(0,95);
}
```
Stap 2:HTML-element voor de knop toevoegen
A. Sleep in de Weebly-editor een "Insluitcode"-element naar uw pagina waar u de knop wilt laten verschijnen.
B. Plak de volgende HTML-code in het veld 'Code':
```
Klik op mij
```
Stap 3:Pas de knop aan
U kunt de knop aanpassen door de volgende eigenschappen binnen de CSS-code te wijzigen:
A. `.btn {kleur:#fff; achtergrond:#3498db;}` - Wijzig de tekstkleur en achtergrondkleur van de knop.
B. `.btn:hover, .btn:active { background:#2980b9;}` - Verander de kleur van de hover en de actieve status van de knop.
Stap 4:Bekijk een voorbeeld en publiceer
A. Klik op de knop 'Voorbeeld' om te zien hoe de knop er op uw site uitziet.
B. Als u tevreden bent met de resultaten, klikt u op "Publiceren" om de wijzigingen live op uw website door te voeren.
Opmerking :De meegeleverde CSS-code gebruikt de knoptekst 'Klik mij'. U kunt deze vervangen door de gewenste tekst binnen de HTML-code.
Door deze stappen te volgen, kunt u 3D CSS-drukknoppen aan uw Weebly-site toevoegen om de gebruikerservaring en visuele aantrekkingskracht te verbeteren. |
