Instal Framework Css3 GitHub Button - Kalini kita akan membahas bagaimana cara menginstal Framework Css3 GitHub style button di blog yang nantinya akan sangat berguna sekali jika kita ingin memberikan link style pada setiap link yang kita share .

Untuk membuatnya silahkan ikuti langkahnya dibawah ini

Cara Instal Framework Css3 GitHub button style di blog
Buka template dan letakkan Css dibawah ini diatas kode ]]></b:skin>

Css



/* Tombol CSS3 Gaya GitHub

==========================================================*/

a.button, button { display: inline-block; padding: 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcSRzpP8jnVxckyE0Y5JErwyzE169wmeHeF83nT_n76S_UNQm1DNmuk7cpJcFwOdR0apgxh8I5qExle6TZPUwAvtCdykngk9NOmV46maJVx2CEKyWAiRZ4Apn0DpHhJFB3TBzMWz5EBZQ5/s1600/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; outline: none; position: relative; zoom: 1; line-height: 1.11; *display: inline; *vertical-align: middle; }

button { margin-left: 0; margin-right: 0; *padding: 5px 5px 3px 5px; }

a.button { -moz-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none;}

button::-moz-focus-inner { border: 0; padding:0px; }

a.button.primary, button.primary { font-weight: bold }

button:focus,a.button:hover,

button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }

a.button:active, button:active,

a.button.active, button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }

a.button:active, button:active { top: 1px }

a.button.negative:hover, button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }

a.button.negative:active, button.negative:active,

a.button.negative.active, button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }

a.button.positive:hover, button.positive:hover { background-position: 0 -280px; background-color: #96ED89; border-color: #45BF55; }

a.button.positive:active, button.positive:active,

a.button.positive.active, button.positive.active { background-position: 0 -320px; background-color: #45BF55; }

a.button.pill, button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 5px 10px 4px 10px; *padding: 4px 10px; }

a.button.left, button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; border-right: none; }

a.button.middle, button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; }

a.button.right, button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }

a.button.left:active, button.left:active,

a.button.middle:active, button.middle:active,

a.button.right:active, button.right:active { top: 0px }

a.button.big, button.big { font-size: 16px; padding-left: 14px; padding-right: 17px; }

button.big { *padding: 4px 17px 2px 17px; }

a.button span.icon, button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 0; *top: 0px; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL0RFhSjQPFS8d3ODG7EjtvcU3j_5sbsvxUmwjpAW9MXzlU4rpcqaUDPlkOec0ilncO5lXjj1MMMBfEgzKtNhLvUsqhyinwm30wI2DvkqjeIyBssAvvwHSCg51jO9-dow5V8bhxawC0ac4/s1600/css3buttons_icons.png'); background-repeat: no-repeat; }

a.big.button span.icon, button.big span.icon { top: 0px }

a.button span.icon.book, button span.icon.book { background-position: 0 0 }

a.button:hover span.icon.book, button:hover span.icon.book { background-position: 0 -15px }

a.button span.icon.calendar, button span.icon.calendar { background-position: 0 -30px }

a.button:hover span.icon.calendar, button:hover span.icon.calendar { background-position: 0 -45px }

a.button span.icon.chat, button span.icon.chat { background-position: 0 -60px }

a.button:hover span.icon.chat, button:hover span.icon.chat { background-position: 0 -75px }

a.button span.icon.check, button span.icon.check { background-position: 0 -90px }

a.button:hover span.icon.check, button:hover span.icon.check { background-position: 0 -103px }

a.button span.icon.clock, button span.icon.clock { background-position: 0 -116px }

a.button:hover span.icon.clock, button:hover span.icon.clock { background-position: 0 -131px }

a.button span.icon.cog, button span.icon.cog { background-position: 0 -146px }

a.button:hover span.icon.cog, button:hover span.icon.cog { background-position: 0 -161px }

a.button span.icon.comment, button span.icon.comment { background-position: 0 -176px }

a.button:hover span.icon.comment, button:hover span.icon.comment { background-position: 0 -190px }

a.button span.icon.cross, button span.icon.cross { background-position: 0 -204px }

a.button:hover span.icon.cross, button:hover span.icon.cross { background-position: 0 -219px }

a.button span.icon.downarrow, button span.icon.downarrow { background-position: 0 -234px }

a.button:hover span.icon.downarrow, button:hover span.icon.downarrow { background-position: 0 -249px }

a.button span.icon.fork, button span.icon.fork { background-position: 0 -264px }

a.button:hover span.icon.fork, button:hover span.icon.fork { background-position: 0 -279px }

a.button span.icon.heart, button span.icon.heart { background-position: 0 -294px }

a.button:hover span.icon.heart, button:hover span.icon.heart { background-position: 0 -308px }

a.button span.icon.home, button span.icon.home { background-position: 0 -322px }

a.button:hover span.icon.home, button:hover span.icon.home { background-position: 0 -337px }

a.button span.icon.key, button span.icon.key { background-position: 0 -352px }

a.button:hover span.icon.key, button:hover span.icon.key { background-position: 0 -367px }

a.button span.icon.leftarrow, button span.icon.leftarrow { background-position: 0 -382px }

a.button:hover span.icon.leftarrow, button:hover span.icon.leftarrow { background-position: 0 -397px }

a.button span.icon.lock, button span.icon.lock { background-position: 0 -412px }

a.button:hover span.icon.lock, button:hover span.icon.lock { background-position: 0 -427px }

a.button span.icon.loop, button span.icon.loop { background-position: 0 -442px }

a.button:hover span.icon.loop, button:hover span.icon.loop { background-position: 0 -457px }

a.button span.icon.magnifier, button span.icon.magnifier { background-position: 0 -472px }

a.button:hover span.icon.magnifier, button:hover span.icon.magnifier { background-position: 0 -487px }

a.button span.icon.mail, button span.icon.mail { background-position: 0 -502px }

a.button:hover span.icon.mail, button:hover span.icon.mail { background-position: 0 -514px }

a.button span.icon.move, button span.icon.move { background-position: 0 -526px }

a.button:hover span.icon.move, button:hover span.icon.move { background-position: 0 -541px }

a.button span.icon.pen, button span.icon.pen { background-position: 0 -556px }

a.button:hover span.icon.pen, button:hover span.icon.pen { background-position: 0 -571px }

a.button span.icon.pin, button span.icon.pin { background-position: 0 -586px }

a.button:hover span.icon.pin, button:hover span.icon.pin { background-position: 0 -601px }

a.button span.icon.plus, button span.icon.plus { background-position: 0 -616px }

a.button:hover span.icon.plus, button:hover span.icon.plus { background-position: 0 -631px }

a.button span.icon.reload, button span.icon.reload { background-position: 0 -646px }

a.button:hover span.icon.reload, button:hover span.icon.reload { background-position: 0 -660px }

a.button span.icon.rightarrow, button span.icon.rightarrow { background-position: 0 -674px }

a.button:hover span.icon.rightarrow, button:hover span.icon.rightarrow { background-position: 0 -689px }

a.button span.icon.rss, button span.icon.rss { background-position: 0 -704px }

a.button:hover span.icon.rss, button:hover span.icon.rss { background-position: 0 -719px }

a.button span.icon.tag, button span.icon.tag { background-position: 0 -734px }

a.button:hover span.icon.tag, button:hover span.icon.tag { background-position: 0 -749px }

a.button span.icon.trash, button span.icon.trash { background-position: 0 -764px }

a.button:hover span.icon.trash, button:hover span.icon.trash { background-position: 0 -779px }

a.button span.icon.unlock, button span.icon.unlock { background-position: 0 -794px }

a.button:hover span.icon.unlock, button:hover span.icon.unlock { background-position: 0 -809px }

a.button span.icon.uparrow, button span.icon.uparrow { background-position: 0 -824px }

a.button:hover span.icon.uparrow, button:hover span.icon.uparrow { background-position: 0 -839px }

a.button span.icon.user, button span.icon.user { background-position: 0 -854px }

a.button:hover span.icon.user, button:hover span.icon.user { background-position: 0 -869px }

a.button:hover{text-decoration:none !important;}

Dan untuk memunculkan Button style ini di blog semisal di dalam  posting atau dimanapun anda mau , maka gunakan HTML Markup seperti contoh dibawah ini .

Note :


Yang perlu kita tambahkan pada link adalah hanya Class pada tag a . Lihat contoh penerapannya

HTML



<a href="http://goblogination.blogspot.com" class="button">Blogination</a>
Hasilnya seperti ini Blogination

Untuk membuat tombol dengan icon , yang perlu kita lakukan adalah menambahkan <span class="nama_ikon icon"></span> sebelum penutup tag </a>
 Contoh :

<a class="button" href="http://goblogination.blogspot.com"><span class="magnifier icon"></span>Nama Tombol</a>
Hasilnya seperti ini Nama Tombol

Jika ingin menggunakan icon yang lain , dibawah ini adalah nama nama dari icon yang bisa digunakan berikut contoh hasil penggunaan icon nya .

Nama Ikon Hasilnya
book View Log
calendar Add to Calendar
chat Start Chat
check Approve Registration
clock Register Work Time
cog Settings
comment Add Comment
cross Remove Item
downarrow Move Down
fork Create Branch
heart Add to Favorites
home Back to Frontpage
key Password Protect
leftarrow Move Left
lock Lock Article
loop Resend Message
magnifier Search
mail Send Newsletter
move Move
pen Edit Post
pin Pin to Map
plus Add Post
reload Reload Page
rightarrow Move Right
rss Subscribe to RSS Feed
tag Add Tag
trash Delete Post
unlock Unlock Article
uparrow Move Up
user Add New User


Styles


Masih ada beberapa macam tombol lagi yang memang keren untuk digunakan , contoh2 nya ada dibawah ini

<a href="#" class="pill button">Tombol Oval</a> 
Hasilnya Tombol Oval

<a href="#" class="left primary button">Home</a><a href="#" class="middle button">About</a><a href="#" class="right negative button">Delete</a>

Hasilnya HomeAboutDelete


<a href="#" class="left primary pill button">Home</a><a href="#" class="middle pill button">About</a><a href="#" class="right negative pill button">Delete</a>
Hasilnya HomeAboutDelete

Sekian saja semoga bermanfaat .

re: http://www.hsp21.com/

Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih