CSS3 Amination Effect Buttons για Blogger
Σε αυτό το tutorial θα σας εξηγήσουμε πως με την χρήση τεχνολογιών css και html θα μπορέσετε να προσθέσετε ένα καλαίσθητο hover effect button για το blog σας. Το btn του παραδείγματος μας έχει μεγάλο μήκος (όπως μπορείτε να δείτε και στην φωτογραφία που ακολουθεί ) έτσι μια πιθανή χρήση του θα μπορούσε κάλλιστα να είναι ένα "download" button ή για οποιαδήποτε άλλη ενέργεια θέλετε να προσελκύσετε το ενδιαφέρον του αναγνώστη - επισκέπτη σας. Μια δυναμική ιστοσελίδα δεν είναι απαραίτητο ότι πρέπει να στερείται καλαισθησίας εξάλλου.
CSS3 Amination Effect Buttons For Blogger Αρχικά συνδεθείτε στο blogger account σας και κάντε κλικ στο drop down όπως στην εικόνα που ακολουθεί.
2. Τώρα επιλέξτε "Template" όπως στην εικόνα που ακολουθεί.
3. Τώρα είστε Live στο blog, κάντε κλικ στο EDIT HTML Button 4. Τώρα δώστε κλικ στο Proceed button. 5. Βρείτε τον κώδικα που σας δίνουμε με την χρήση του Ctrl+F ]]> 6. Κάντε paste τον κώδικα που ακολουθεί πριν τον κώδικα ]]> .a-btn{ -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:200px; padding:10px 30px 10px 70px; position:relative; float:left; display:block; overflow:hidden; margin:10px; background:#fff; background:-webkit-gradient(linear,left top,left bottom,colorstop(rgba(255,255,255,1),0),color-stop(rgba(246,246,246,1),0.74),colorstop(rgba(237,237,237,1),1)); background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%); background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%); background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%); background:linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); -webkit-transition:box-shadow 0.3s ease-in-out; -moz-transition:box-shadow 0.3s ease-in-out; -o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out; } .a-btn-symbol{ font-family:'WebSymbolsRegular', cursive; color:#555; font-size:20px; text-shadow:1px 1px 2px rgba(255,255,255,0.5); position:absolute; left:20px; line-height:32px; -webkit-transition:opacity 0.3s ease-in-out; -moz-transition:opacity 0.3s ease-in-out; -o-transition:opacity 0.3s ease-in-out; transition:opacity 0.3s ease-in-out; } .a-btn-text{ font-size:20px; color:#d7565b; line-height:16px; font-weight:bold; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; text-shadow:1px 1px 2px rgba(255,255,255,0.5); display:block; } .a-btn-slide-text{ font-family:Arial, sans-serif; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#555; display:block; text-shadow:0px 1px 1px rgba(255,255,255,0.9); } .a-btn-slide-icon{ position:absolute; top:-30px; width:22px; height:22px; background:transparent url(http://3.bp.blogspot.com/JoMPpONZTiw/UIS9vW96QqI/AAAAAAAAAMs/Dw2LUk4NmYc/s1600/arrow_down_black.png) no-repeat top left; left:20px; opacity:0.4; } .a-btn:hover{ background:#fff; -webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); } .a-btn:hover .a-btn-symbol{ opacity:0; } .a-btn:hover .a-btn-slide-icon{ -webkit-animation:slideDown 0.9s linear infinite; -moz-animation:slideDown 0.9s linear infinite; animation:slideDown 0.9s linear infinite; } .a-btn:active{ background:#d7565b; -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); } .a-btn:active .a-btn-text{ color:#fff; text-shadow:0px 1px 1px rgba(0,0,0,0.3); } .a-btn:active .a-btn-slide-text{ color:rgba(0,0,0,0.4); text-shadow:none; } @keyframes slideDown{ 0% { top: -30px; } 100% { top: 80px;} } @-webkit-keyframes slideDown{ 0% { top: -30px; } 100% { top: 80px;} } @-moz-keyframes slideDown{ 0% { top: -30px; } 100% { top: 80px;} }
7. Πηγαίντε στον κώδικα και κάντε κλικ στο drop-down όπως στο 1ο βήμα του παραδείγματος μας και επιλέξτε Layout 8. Κάντε κλικ στο Add Gadget και επιλέξτε 'HTML/Javascript" 9. Κάντε paste τον ακόλουθο κώδικα. X Download Now Windows Vista / Windows 7 X Download Now Windows Vista / Windows 7 X Download Now Windows Vista / Windows 7 X Download Now Windows Vista / Windows 7
* Μην ξεχάσετε να αντικαταστήσετε με το δικό σας url στο button 10. Σώστε το template και είστε έτοιμος. Αυτό ήταν.