tombol css3

moonroemoort

css

26 March 2014

Belum ada komentar

CARA PEMASANGAN

• masuk blogger.com
• klik menu template > edit HTML
• cari kode ]]></b:skin>
• paste lan kode di bawah ini tepat di atas kode ]]></b:skin>

.button, .button:visited { background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font-family: calibri; } .button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .small.button, .small.button:visited { font-size: 11px } .button, .button:visited, .medium.button, .medium.button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .medium.button, .medium.button:visited { font-size: 14px; padding: 8px 14px 9px; } .large.button, .large.button:visited { font-size: 34px; padding: 8px 14px 9px; } .pink.button, .magenta.button:visited { background-color: #e22092; } .pink.button:hover { background-color: #c81e82; } .green.button, .green.button:visited { background-color: #91bd09; } .green.button:hover { background-color: #749a02; } .red.button, .red.button:visited { background-color: #e62727; } .red.button:hover { background-color: #cf2525; } .orange.button, .orange.button:visited { background-color: #ff5c00; } .orange.button:hover { background-color: #d45500; } .blue.button, .blue.button:visited { background-color: #2981e4; } .blue.button:hover { background-color: #2575cf; } .yellow.button, .yellow.button:visited { background-color: #ffb515; } .yellow.button:hover { background-color: #fc9200; } - See more at: http://www.helperblogger.com/2012/07/beautiful-css3-buttons-for-blogger.html#sthash.cawmM7pp.dpuf

• klik save template

CARA PASANG

• masukan kode di bawah ini pada mode HTML di posting

LARGE BUTTON

<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center> 

MEDIUM BUTTON

<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center> 

KETERANGAN

•  ganti LINK HERE dengan url tujuan
• ganti LINK TEKS HERE dengan judul tombol