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:

```

.knop-3d {

display:inline-blok;

opvulling:10px 20px;

achtergrondkleur:#000;

kleur:#fff;

tekst uitlijnen:centreren;

tekstversiering:geen;

teksttransformatie:hoofdletters;

lettertypegewicht:vet;

rand:2px effen #fff;

}

.button-3d:actief {

transformeren:schaal (0,9);

achtergrondkleur:#333;

randkleur:#333;

}

```

Stap 2:Uw knop vormgeven

A. In de code kunt u ervoor kiezen om verschillende stijlopties voor uw knoppen aan te passen.

- Bewerk 'padding', 'background-color', 'color' en 'font-weight' om het uiterlijk aan te passen.

- Wijzig `border-color` om de kleur van de rand rond de knop in te stellen.

B. Experimenteer gerust met de CSS-eigenschappen om het gewenste uiterlijk voor uw knoppen te bereiken.

Stap 3:voeg de knop toe aan uw site

A. Voeg in uw Weebly-editor een tekstelement toe aan de gewenste locatie op uw pagina.

B. Klik op het tabblad "HTML" in de tekstelementinstellingen.

C. Voeg de volgende HTML-code toe, waarbij u 'Uw tekst' vervangt door de tekst die u op de knop wilt weergeven:

```html

Uw tekst

```

Stap 4:Pas de plaatsing van de knoppen aan

A. U kunt de positie en stijl van de knop aanpassen via de Tekstelementinstellingen.

B. Overweeg de uitlijningsopties te gebruiken om de knop indien nodig te centreren of zwevend te maken.

Stap 5:Opslaan en publiceren

A. Als u tevreden bent met het uiterlijk en de plaatsing van uw knop, klikt u op 'Opslaan' om de wijzigingen toe te passen.

B. Bekijk een voorbeeld van de wijzigingen op uw site.

C. Wanneer u klaar bent, klikt u op "Publiceren" om de knop live op uw website te plaatsen.

Door deze stappen te volgen, kunt u eenvoudig 3D CSS-drukknoppen toevoegen om de gebruikerservaring en esthetiek van uw Weebly-website te verbeteren.