Ads 468x60px

Τετάρτη, 5 Οκτωβρίου 2016

Rounded CSS Button

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα Rounded CSS Button για τα blog
μας!Είναι με CSS κώδικα στρογγυλό φινετσάτο διαφέρει κατά πολύ από
άλλα κοινά κουμπιά, τοποθετείτε παντού στην σελίδα μας και διαθέτει και hover effect στο mouseover του
κέρσορα μας!







 Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--

..............................................................................................................................................................

<style>
input#avdhootround{
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#ff0000;
border:1px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:1.6em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#avdhootround:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}
</style>
<a href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΣΑΣ"><input id="avdhootround" type="submit" value="ΤΙΤΛΟΣ ΚΟΥΜΠΙΟΥ" /></a>

.................................................................................................................................................................
ΑΛΛΑΓΕΣ


ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΣΑΣ----Εδώ βάζετε το link της διεύθυνσης σας

ΤΙΤΛΟΣ ΚΟΥΜΠΙΟΥ----Εδώ βάζετε τον τίτλο του κουμπιού

Αποθήκευση και έτοιμοι!


Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to avdhootblogger.com



 Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog