css3 button

CSS3 Amination Effect Buttons για Blogger

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
23/10/2012 από
adavalas

Σε αυτό το tutorial θα σας εξηγήσουμε πως με την χρήση τεχνολογιών css και html θα μπορέσετε να προσθέσετε ένα καλαίσθητο hover effect button για το blog σας. Το btn του παραδείγματος μας έχει μεγάλο μήκος (όπως μπορείτε να δείτε και στην φωτογραφία που ακολουθεί ) έτσι μια πιθανή χρήση του θα μπορούσε κάλλιστα να είναι ένα “download” button ή για οποιαδήποτε άλλη ενέργεια θέλετε να προσελκύσετε το ενδιαφέρον του αναγνώστη – επισκέπτη σας. Μια δυναμική ιστοσελίδα δεν είναι απαραίτητο ότι πρέπει να στερείται καλαισθησίας εξάλλου.

CSS3 Amination Effect Buttons For Blogger

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,color-stop(rgba(255,255,255,1),0),color-stop(rgba(246,246,246,1),0.74),color-stop(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 τον ακόλουθο κώδικα.


* Μην ξεχάσετε να αντικαταστήσετε με το δικό σας url στο button

10. Σώστε το template και είστε έτοιμος. Αυτό ήταν.








Hide ↑

Aσφάλεια στο opencart

04 September 2014

Με το θέμα της διαδικτυακής ασφάλειας να γίνεται ένας ολοένα και μεγαλύτερης σημασίας ζήτημα κατά την

Read more...

Μαθήματα opencart - Αλλαγή του navigation bar

02 September 2014

To OpenCart αποτελεί μια από τις πιο διάσημες πλατφόρμες για την κατασκευή[…]

Read more...

WordFence. Ασφάλεια στο wordpress

01 September 2014

Το WordFence είναι ένα ιδιαίτερα δημοφιλές WordPress plugin που χειρίζεται πολλούς διαφορετικούς και κρίσιμους τομείς ασφαλείας τόσο[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.