Yozzz Kali Ini Saya Nge posting Tentang Button With Css3 Cool. Dikarenakan Css Button Ini Sangat Menarik, Dengan Bermacam Bentuk Button. ada...
Yozzz Kali Ini Saya Nge posting Tentang Button With Css3 Cool.
Dikarenakan Css Button Ini Sangat Menarik, Dengan Bermacam Bentuk Button.
ada yang berbentuk Circle/bulat dengan tanda ceklis dan ada juga button bentuk sederhana.
kali ini saya Posting Dari Sumber Mas Dharla. tau gak mas Dharla ???
Itu Loh Yang BLog nya Mode Simple Dan Menarik Sama Seperti Kang Ismet , Mas Taufiq Dan Kompi Ajaib.
Sebenar nya saya sih iri sama mereka, soal nya Pada Mahir smua nya dalam Peng Codingan.
akhh gw mah cuman bisa nya redesign hasil mereka. gak bisa bikin sendiri. kalo bisa pun bikin sendiri cuman cemen cemen nya aja. button nya palingan hanya Hover dan HighLight , gitu doank yang bisa saya bikin.
saat ini saya posting Button CSs3 Cool.
Langsung saja ke pokok permasalahan
Pertama Login Dolo Ke Blogger Sobat
Kedua masuk ke Dalam Edit HTML pada BLogger
Ketiga masukan CSS ini pada tempat nya. tepat Diatas ]]><b:skin atau Bisa Juga Diatas </style>
kalo template anda sudah Komplit
.button {
display: inline-block;
vertical-align: top;
height: 48px;
line-height: 46px;
padding: 0 25px;
font-family: inherit;
font-size: 15px;
color: #bbb;
text-align: center;
text-decoration: none;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
background-color: #303030;
background-clip: padding-box;
border: 1px solid;
border-color: #202020 #1a1a1a #111;
border-radius: 25px;
background-image: -webkit-linear-gradient(top, #3d3d3d, #272727);
background-image: -moz-linear-gradient(top, #3d3d3d, #272727);
background-image: -o-linear-gradient(top, #3d3d3d, #272727);
background-image: linear-gradient(to bottom, #3d3d3d, #272727);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #363636;
background-image: -webkit-linear-gradient(top, #404040, #2a2a2a);
background-image: -moz-linear-gradient(top, #404040, #2a2a2a);
background-image: -o-linear-gradient(top, #404040, #2a2a2a);
background-image: linear-gradient(to bottom, #404040, #2a2a2a);
}
.button:active, .button.active {
line-height: 48px;
color: #ccc;
background-color: #b42f32;
border-color: #1c1c1c #202020 #222;
background-image: -webkit-linear-gradient(top, #a3161a, #b63335 60%, #bf4749);
background-image: -moz-linear-gradient(top, #a3161a, #b63335 60%, #bf4749);
background-image: -o-linear-gradient(top, #a3161a, #b63335 60%, #bf4749);
background-image: linear-gradient(to bottom, #a3161a, #b63335 60%, #bf4749);
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09);
}
.button-check {
position: relative;
width: 48px;
padding: 0;
font: 0/0 serif;
text-shadow: none;
color: transparent;
}
.button-check:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -7px 0 0 -10px;
height: 5px;
width: 16px;
border: solid #bbb;
border-width: 0 0 5px 5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
.button-check:active:before, .button-check.active:before {
margin-top: -6px;
border-color: #ccc;
-webkit-box-shadow: -1px 1px rgba(0, 0, 0, 0.3);
box-shadow: -1px 1px rgba(0, 0, 0, 0.3);
}
/* a.k.a. the Unicode version */
.lt-ie9 .button {line-height: 46px;}
.lt-ie9 .button-check:before {content: none;}
.lt-ie9 .button-check:after {
content: '\2713';
font-size: 24px;
font-weight: bold;
color: #bbb;
}
Oh Iya Nih HTML nya Anda Gunakan pada Postingan, Peletakan Nya Didalam Postingan . Buat Mode HTML BUkan Compose Yah karena Kita Ini Menggunakan HTML. Nih Dia HTML nya<a href="#" class="button">Button Download</a>
<a href="#" class="button active">Button Download</a>
<a href="#" class="button button-check">OK</a>
<a href="#" class="button button-check active">OK</a>
Oh Iya Pada Tanda [#] Anda Ganti Dengan Alamat URL yang Mau dituju.
Sumber:Dharal
