BUY NOW κουμπιά αγοράς για ηλεκτρονικό εμπόριο

Στις μέρες μας το ηλεκτρονικό εμπόριο έχει γίνει ο πιο εξελιγμένος τρόπος αγοραπωλησίας.

Το θέμα αυτό μας δίνει τη δυνατότητα να προσθέσουμε στο blog μας κουμπιά που παραπέμπουν τον επισκέπτη στην αγορά ενός προϊόντος.

Έτσι θα δούμε πως μπορούμε να εγκαταστήσουμε κουμπιά αγοράς προϊόντων στο blog μας, με την βοήθεια της CSS3. Θα δημιουργήσουμε λοιπόν δυο κουμπιά με διαφορετικό χρώμα ακριβώς σαν αυτά της παρακάτω φωτογραφίας. Μπορείτε να αλλάξετε το κείμενο και φυσικά την τιμή των κουμπιών. 

Demo των κουμπιών εδώ 

Ακολουθήστε τα παρακάτω βήματα για να τα εγκαταστήσετε στη Σελίδα σας:

• Σύνδεση στον Blogger
• Πρότυπο / Επεξεργασία HTML / Συνέχεια
• Ctrl+f και βρείτε τo ]]></b:skin>
• Επικολλήστε πριν από το ]]></b:skin> τον παρακάτω κώδικα: 

.button {
font-family: 'Droid Sans', sans-serif;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
margin: 40px;
border: 1px solid rgba(0,0,0,0.4) ;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
0 0 1px 1px rgba(255,255,255,0.8),
0 0 0 6px rgba(0,0,0,0.06),
0 0 0 3px rgba(0,0,0,0.1);
cursor: pointer;
}
.title {
padding: 10px;
float: left;
color: #fff;
font-weight: 800;
font-size: 20px;
text-shadow: 1px 1px rgba(0,0,0,0.2);
text-transform: uppercase;
border-right: 1px solid rgba(255,255,255,0.3);
}
.price {
padding: 10px;
float: left;
color: rgba(0,0,0,0.4);
font-weight: 800;
font-size: 20px;
text-shadow: 1px 1px rgba(255,255,255,0.3);
text-transform: uppercase;
border-left: 1px solid rgba(0,0,0,0.2);
}
/* colors */
.yellow {
background: rgb(255,214,94);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1)));
background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
}
.yellow:hover {
background: rgb(254,191,4);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYmYwNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmQ2NWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(254,191,4,1) 0%, rgba(255,214,94,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,191,4,1)), color-stop(100%,rgba(255,214,94,1)));
background: -webkit-linear-gradient(top, rgba(254,191,4,1) 0%,rgba(255,214,94,1) 100%);
background: -o-linear-gradient(top, rgba(254,191,4,1) 0%,rgba(255,214,94,1) 100%);
background: -ms-linear-gradient(top, rgba(254,191,4,1) 0%,rgba(255,214,94,1) 100%);
background: linear-gradient(top, rgba(254,191,4,1) 0%,rgba(255,214,94,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf04', endColorstr='#ffd65e',GradientType=0 );
}
.green {
background: rgb(143,200,0);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhmYzgwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NjhlMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,200,0,1)), color-stop(100%,rgba(102,142,0,1)));
background: -webkit-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);
background: -o-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);
background: -ms-linear-gradient(top, rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);
background: linear-gradient(top, rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#668e00',GradientType=0 );
}
.green:hover {
background: rgb(102,142,0);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2OGUwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ZmM4MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(102,142,0,1) 0%, rgba(143,200,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,142,0,1)), color-stop(100%,rgba(143,200,0,1)));
background: -webkit-linear-gradient(top, rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);
background: -o-linear-gradient(top, rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);
background: -ms-linear-gradient(top, rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);
background: linear-gradient(top, rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#668e00', endColorstr='#8fc800',GradientType=0 );
}

• Αποθηκεύστε το πρότυπο
• Για να χρησιμοποιήσετε τα κουμπιά σε μια ανάρτηση χρησιμοποιήστε από την "HTML" τους παρακάτω κώδικες:

ΓΙΑ ΤΟ ΚΙΤΡΙΝΟ ΚΟΥΜΠΙ:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<button class="button yellow">
<div class="title">Buy Now</div>
<div class="price">$9,99</div>
</button>

ΓΙΑ ΤΟ ΠΡΑΣΙΝΟ ΚΟΥΜΠΙ:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<button class="button green">
<div class="title">Buy Now</div>
<div class="price">$9,99</div>
</button>

 πηγή: bloggertipsandtricks.net