Colored Links Buttons

ΕΓΧΡΩΜΑ BUTTONS ΜΕ LINKS

Με τον παρακάτω κώδικα μπορούμε να δώσουμε στυλ στα links μας να τα κάνουμε έγχρωμα με στρογγυλεμένες άκρες, περίγραμμα και να αλλάζουν χρώμα ότν περνάμε το ποντίκι από πάνω τους. Ο κώδικας αυτός μπαίνει απλά σαν gadget οπουδήποτε θέλετε να εμφανίζονται τα links. Καλό θα ήταν όμως το πρώτο μέρος του κώδικα από το <style> μέχρι το </style> να μπεί μέσα στο πρότυπο πρίν την γραμμή ]]></b:skin> για να μην τον ξαναβάζετε μέσα σε κάθε gadget σε περίπτωση που θα βάλετε τα links σε 2 ή περισσότερα gadget μέσα στο ιστολόγιό σας, αλλά να βάζετε μόνο το 2^ομέρος του κώδικα.

Τα χρώματα μπορείτε να τα αλλάξετε, αλλάζοντας τους κωδικούς των χρωμάτων που έχουν μπροστά τους το σύμβολο της δίεσης #. Στο 2^ο μέρος του κώδικα γράφετε πάντα μετά από τα link το στυλ του button π.χ. button c1 μέχρι button c9. Αμέσως μετά γράφετε το μέγεθος της γραμματοσειράς π.χ. px12 μέχρι px20. Δείτε πως θα εμφανίζονται τα κουμπιά τα έχω βάλει εδώ ακριβώς απο κάτω ▼.

HOMEΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGESSOSIAL BUTTONSSLIDESHOWS & IMAGE GALLERIESFACEBOOK WIDGETSWIDGETS ΓΙΑ BLOGSΜΟΡΦΟΠΟΙΗΣΗ BLOGΕΝΣΩΜΑΤΩΣΕΙΣΑΣΦΑΛΕΙΑ BLOG

<style>

.button{font:13px Arial;

text-decoration:none !important;

white-space:nowrap;

display:inline-block;

vertical-align:baseline;

position:relative;

cursor:pointer;

padding:6px 8px;

background-clip:border-box;

-moz-border-radius:8px;

-webkit-border-radius:8px;

border-radius:8px; 

-webkit-transition:background-position 1s;

-moz-transition:background-position 1s;

 transition:background-position 1s;}

.button:hover{

background-position:top left;

background-position:top left, bottom right, 0 0, 0 0;}

.button:active{bottom:-1px;}

.button.px20{font-size:20px;}

.button.px18{font-size:18px;}

.button.px16{font-size:16px;}

.button.px14{font-size:14px;}

.button.px12 {font-size:12px;}

.button.rounded{

 -moz-border-radius:4em;

 -webkit-border-radius:4em;

 border-radius:4em;}

.c1.button{color:#FFFFFF !important;border:1px solid #FBBB22!important;background-color: #173374;}

.c1.button:hover{color:#FFFFFF; background-color:#115595;}

.c2.button{color:#FFFFFF !important;border:1px solid #FBBB22!important;background-color:#105105;}

.c2.button:hover{color:#FFFFFF;background-color:#207907;}

.c3.button{color:#FFFFFF !important;border:1px solid #FBBB22!important;background-color: #661111;}

.c3.button:hover{color:#FFFFFF;background-color:#FF1111;}

.c4.button{color:#FFFFFF !important;border:1px solid #FBBB22!important;background-color: #333333;}

.c4.button:hover{color:#000000;background-color:#000000;}

.c5.button{color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #740777;}

.c5.button:hover{color:#FFFFFF; background-color:#A90C94;}

.c6.button{color:#FFFFFF !important;border:1px solid #FFFF00 !important;background-color:#803503;}

.c6.button:hover{color:#FFFFFF;background-color:#FF6600;}

.c7.button{color:#000000!important;border:1px solid #000000 !important;background-color: #05A2AA;}

.c7.button:hover{color:#000000;background-color:#33FFFF;}

.c8.button{color:#000000!important;border:1px solid #000000 !important;background-color: #03C039;}

.c8.button:hover{color:#000000;background-color:#4EFF44;}

.c9.button{color:#000000!important;border:1px solid #000000 !important;background-color: #FBBB22;}

.c9.button:hover{color:#000000;background-color:#FFFF00;}

</style>

<a href="http://the-best-widgets.blogspot.gr" class="button c9 px12">HOME</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ" class="button c2 px12">ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES" class="button c3 px12">ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/SOSIAL BUTTONS" class="button c4 px12">SOSIAL BUTTONS</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS" class="button c5 px12">SLIDESHOWS & IMAGE GALLERIES</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/FACEBOOK WIDGETS" class="button c6 px12">FACEBOOK WIDGETS</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/WIDGETS ΓΙΑ BLOGS" class="button c7 px12">WIDGETS ΓΙΑ BLOGS</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/ΜΟΡΦΟΠΟΙΗΣΗ BLOG" class="button c9 px12">ΜΟΡΦΟΠΟΙΗΣΗ BLOG</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ" class="button c8 px12">ΕΝΣΩΜΑΤΩΣΕΙΣ</a>

<a href="http://the-best-widgets.blogspot.gr/search/label/ΑΣΦΑΛΕΙΑ BLOG" class="button c1 px12">ΑΣΦΑΛΕΙΑ BLOG</a>

http://gadgetsforblogs7.blogspot.gr/2015/05/buttons-links.html