Ghost buttons στο Drupal. Μάθετε πως.

Ghost buttons στο Drupal. Μάθετε πως.
drupal

Για τα Ghost buttons τα είχαμε πει και σε πιο παλιό άρθρο. Είναι πανέμορφα και είναι μόδα. Πως όμως μπορούμε να τα βάλουμε στο Drupal; Μα με λίγες γραμμούλες CSS όλα γίνονται. Πάμε να δούμε πως.

Για αρχή θα προσθέσουμε απλά κουμπάκια. Ο κώδικας που πρέπει να βάλετε στο CSS του θέματος σας είναι ο εξής:

.ghost-button {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 1px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
}

Τώρα εδώ μπορείτε να ”παίξετε” με τα χρώματα! Να τα αλλάξετε.

Αν θέλετε να έχει hover εφφέ απλά προσθέστε:

.ghost-button:hover,
.ghost-button:active {
background-color: #fff;
color: #000;
}

Τώρα υπάρχουν και άλλες επιλογές. Αν θέλετε με στρογγυλεμένες γωνίες – κοινώς – rounded ο κώδικας CSS είναι:

.ghost-button-rounded-corners {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
outline: none;
text-decoration: none;
}
.ghost-button-rounded-corners:hover,
.ghost-button-rounded-corners:active {
background-color: #fff;
color: #000;
}

Θα σας δώσω και άλλη μία επιλογή. Αν θέλετε ας πούμε πιο χοντρό περίγραμμα. Ο κώδικας είναι:

.ghost-button-thick-border {
display: inline-block;
width: 200px;
font-weight: bold;
padding: 8px;
color: #fff;
border: 3px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.ghost-button-thick-border:hover,
.ghost-button-thick-border:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}

Για να εμφανίσετε το κουμπί μέσα σε ένα μπλοκ δώστε απλά:

<a class="ghost-button" href="#">Ghost button text</a>

Αυτά είναι μερικά από τα πιο δημοφιλή ghost buttons που χρησιμοποιούνται ευρέως αυτή την στιγμή.

Βέβαια αν δεν τα καταφέρετε πάντα υπάρχουν και οι προγραμματιστές.

Facebook Comments

Επάνω
Share via
Copy link
Powered by Social Snap