ANIMATED BUTTONS
Με τον παρακάτω κώδικα
μπορείτε να βάλετε animated buttons στο blog σας.
Μπορείτε να αλλάξετε τα χρώματα των buttons αλλάζοντας
τον κωδικό χρώματος που έχει μπροστάτου το σύμβολο της δίεσης # καθώς και τα
εξωτερικά και εσωτερικά περιθώρια αλλάζοντας τα margin και τα padding του
κάθε button. Εννοείται πως πρέπει να αλλάξετε και τα πράσινα links των buttons με
τα δικά σας links.
BING.COM
BING.COM
BING.COM
BING.COM
BING.COM
BING.COM
BING.COM
<style>
.but1 {position:relative;float:left;background:#000080;color:#33FFFF;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;}
.but1:hover {position:relative;float:left;background:#FF0000;color:#FFFF00;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;}
.but2 {position:relative;float:left;background:#661111;color:#33FFFF;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;}
.but2:hover {position:relative;float:left;background:#009900;color:#FFFF00;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:12px;}
.but3 {position:relative;float:left;background:#105105;color:#33FFFF;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;}
.but3:hover {position:relative;float:left;background:#FFBB22;color:#000080;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;font-size:133%;margin:4px;padding:8px;}
.but4 {position:relative;float:left;background:#740777;color:#33FFFF;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;}
.but4:hover {position:relative;float:left;background:#000000;color:#33FFFF;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:12px;}
.but5 {position:relative;float:left;background:#FF9999;color:#000080;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;}
.but5:hover {position:relative;float:left;background:#33FFFF;color:#000080;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;transition:all 0.3s ease
0.1s;transform:rotate(360deg) scale(1.1);}
.but6 {position:relative;float:left;background:#00FF00;color:#000080;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;}
.but6:hover {position:relative;float:left;background:#FFFF00;color:#000080;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;transition:all 0.3s ease 0.1s;transform:rotate(-360deg)
scale(1.1);}
.but7 {position:relative;float:left;background:#000;color:#33FFFF;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding:8px;animation:blinkingText 0.8s infinite;}
.but7:hover {position:relative;float:left;background:#FF0000;color:#FFFF00;border:1px solid #FFFF00;border-radius:8px;font:16px
arial;margin:4px;padding-left:32px;padding-right:32px;padding-top:8px;padding-bottom:8px;}
</style>
<a href="https://bing.com"
class="but1">BING.COM</a><br><br><br>
<a href="https://bing.com"
class="but2">BING.COM</a><br><br><br>
<a href="https://bing.com"
class="but3">BING.COM</a><br><br><br>
<a href="https://bing.com"
class="but4">BING.COM</a><br><br><br>
<a href="https://bing.com"
class="but5">BING.COM</a><br><br><br>
<a href="https://bing.com"
class="but6">BING.COM</a><br><br><br>
<a href="https://bing.com"
class="but7">BING.COM</a><br><br><br>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.