CSS - Kali ini saya akan membahas bagaimana cara membuat
tombol cantik, keren dengan CSS3 untuk blog. Mungkin sebagian dari kamu pingin
membuat sebuah tombol yang menuju ke beberapa link dan kamu pingin tombol itu
keren dan cantik. CSS by Lateshack.
1. Login ke blog kamu.
2. Pilih Rancangan >
Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan
kode di bawah ini tepat di atas kode yang dicetak tebal di atas.
.awesome, .awesome:visited {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKYNrbqNwt8pvuVSsubLRMEuIvnaxHMI21QPxfJTyH9VBzE2exP-98GgJkl3K5FgVFoxFW4VyM3uCD964E7A-5ay3l0xukn116wye4fzMYt1_ACB0nG6JhKkGdMErScsZYc33E7z687o/s1600/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
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, Arial, sans-serif;
}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 18px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 30px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
.pink.awesome, .pink.awesome:visited { background-color: #e22092; }
.pink.awesome:hover { background-color: #c81e82; }
Simpan Template.
Dan sekarang untuk
membuat tombolnya. Disini ada beberapa ukuran ada yang besar, sedang dan kecil.
Jadi pilih salah satu satu.
UKURAN BESAR
<a
href="LINK" class="large awesome">LINK NAME</a>
<a
href="LINK" class="large blue awesome">LINK
NAME</a>
<a
href="LINK" class="large pink awesome">LINK
NAME</a>
<a
href="LINK" class="large magenta awesome">LINK
NAME</a>
<a
href="LINK" class="large green awesome">LINK
NAME</a>
<a
href="LINK" class="large red awesome">LINK
NAME</a>
<a
href="LINK" class="large orange awesome">LINK
NAME</a>
<a
href="LINK" class="large yellow awesome">LINK
NAME</a>
UKURAN SEDANG
<a
href="LINK" class="medium awesome">LINK NAME</a>
<a
href="LINK" class="medium blue awesome">LINK
NAME</a>
<a
href="LINK" class="medium pink awesome">LINK
NAME</a>
<a
href="LINK" class="medium magenta awesome">LINK
NAME</a>
<a
href="LINK" class="medium green awesome">LINK
NAME</a>
<a
href="LINK" class="medium red awesome">LINK
NAME</a>
<a
href="LINK" class="medium orange awesome">LINK
NAME</a>
<a
href="LINK" class="medium yellow awesome">LINK
NAME</a>
UKURAN KECIL
<a
href="LINK" class="small awesome">LINK NAME</a>
<a
href="LINK" class="small blue awesome">LINK
NAME</a>
<a
href="LINK" class="small pink awesome">LINK
NAME</a>
<a
href="LINK" class="small magenta awesome">LINK
NAME</a>
<a
href="LINK" class="small green awesome">LINK
NAME</a>
<a
href="LINK" class="small red awesome">LINK NAME</a>
<a
href="LINK" class="small orange awesome">LINK
NAME</a>
<a
href="LINK" class="small yellow awesome">LINK
NAME</a>
Ganti kata LINK dengan
URL yang dituju dan kata LINK NAME dengan nama yang kamu inginkan
Sumber: klik234
