ANIMATED BUTTONS

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>