Πώς να προσθέσετε κουμπιά 3D CSS στο Weebly;

Προσθήκη κουμπιών 3D CSS στο Weebly περιλαμβάνει μερικά βήματα προσαρμογής κώδικα εντός της προσαρμοσμένης ενότητας CSS. Δείτε πώς μπορείτε να τα προσθέσετε στον ιστότοπό σας στο Weebly:

Βήμα 1:Δημιουργία προσαρμοσμένου CSS

ένα. Στο πρόγραμμα επεξεργασίας Weebly, κάντε κλικ στις "Ρυθμίσεις" στην επάνω δεξιά γωνία.

σι. Επιλέξτε "SEO &Code" από το αριστερό μενού.

ντο. Κάντε κλικ στην καρτέλα "Προσαρμοσμένο CSS".

ρε. Επικολλήστε τον ακόλουθο κώδικα στο πεδίο Προσαρμοσμένο CSS:

```

.button-3d {

οθόνη:inline-block;

padding:10px 20px;

χρώμα φόντου:#000;

χρώμα:#fff;

text-align:κέντρο;

κείμενο-διακόσμηση:κανένα;

μετατροπή κειμένου:κεφαλαία;

βάρος γραμματοσειράς:έντονη γραφή;

περίγραμμα:2px συμπαγές #fff;

}

.button-3d:active {

transform:scale(0.9);

χρώμα φόντου:#333;

χρώμα περιγράμματος:#333;

}

```

Βήμα 2:Προσαρμογή του κουμπιού σας

ένα. Στον κώδικα, μπορείτε να επιλέξετε να τροποποιήσετε διάφορες επιλογές στυλ για τα κουμπιά σας.

- Επεξεργαστείτε τα "padding", "background-color", "color" και "font-weight" για να προσαρμόσετε την εμφάνιση.

- Αλλάξτε το "border-color" για να ορίσετε το χρώμα του περιγράμματος γύρω από το κουμπί.

σι. Μη διστάσετε να πειραματιστείτε με τις ιδιότητες CSS για να επιτύχετε την επιθυμητή εμφάνιση για τα κουμπιά σας.

Βήμα 3:Προσθέστε το κουμπί στον ιστότοπό σας

ένα. Στο πρόγραμμα επεξεργασίας Weebly, προσθέστε ένα στοιχείο κειμένου στην επιθυμητή θέση στη σελίδα σας.

σι. Κάντε κλικ στην καρτέλα "HTML" στις ρυθμίσεις του στοιχείου κειμένου.

ντο. Προσθέστε τον ακόλουθο κώδικα HTML, αντικαθιστώντας το "Το κείμενό σας" με το κείμενο που θέλετε να εμφανιστεί στο κουμπί:

```html

Το κείμενό σας

```

Βήμα 4:Προσαρμογή της τοποθέτησης κουμπιού

ένα. Μπορείτε να προσαρμόσετε τη θέση και το στυλ του κουμπιού χρησιμοποιώντας τις ρυθμίσεις στοιχείου κειμένου.

σι. Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε τις επιλογές ευθυγράμμισης για να κεντράρετε ή να αιωρείτε το κουμπί όπως χρειάζεται.

Βήμα 5:Αποθήκευση και δημοσίευση

ένα. Μόλις είστε ικανοποιημένοι με την εμφάνιση και την τοποθέτηση του κουμπιού σας, κάντε κλικ στο "Αποθήκευση" για να εφαρμόσετε τις αλλαγές.

σι. Κάντε προεπισκόπηση των αλλαγών στον ιστότοπό σας.

ντο. Όταν είστε έτοιμοι, κάντε κλικ στο "Δημοσίευση" για να κάνετε το κουμπί ζωντανό στον ιστότοπό σας.

Ακολουθώντας αυτά τα βήματα, μπορείτε εύκολα να προσθέσετε κουμπιά 3D CSS για να βελτιώσετε την εμπειρία χρήστη και την αισθητική του ιστότοπού σας Weebly.