Membuat Tombol Demo (Download) dengan CSS adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Membuat Tombol Demo (Download) dengan CSS ini.
Lama gak posting terasa kangen juga ingin ngeblog, ya mau gimana lagi hampi setiap hari lembur dengan kerjaan yang menumpuk. Pada waktu gak sedikit ini Kang Fathur sempatkan untuk membagikan tutorial yang mungkin anda butuhkan dalam blog. Bahkan bagi pengguna blog yang menyediakan link-link download, artikel ini sangat cocok untuk diterapkan.
Seperti blog penyedia download template, pasti disitu ada link DEMO dan DOWNLOAD yang harus diterapkan. Sebab, ini membuat pengunjung gak bertanya-tanya lagi kayak apa sih dan bagaimana hasilnya.
Seperti biasanya anda menerapkan kode CSS ini diatas kode ]]></b:skin> yang ada pada template blog anda. Brikut kopde CSS yang bisa anda copy paste sebelum kode ]]></b:skin>
Langakh I
.box-css3-tombol-download{
padding: 10px 0;
}
.css3-tombol-download{
margin:0 auto;
text-decoration:none;
width:140px;
text-align:left;
height:38px;
display:block;
overflow:hidden;
font:normal normal 20px/14px Arial, Helvetica;
color:#fefefe;
cursor:pointer;
text-shadow:0 1px 0 rgb(129, 56, 149);
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:
inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191);
-webkit-box-shadow:none!important
/* inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191) */;
-moz-box-shadow:
inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191);
background:#C65AE3;
background:-moz-linear-gradient(top,
rgb(213, 118, 237) 0%,
rgb(168, 60, 197) 100%);
background:-o-linear-gradient(top,
rgb(213, 118, 237) 0%,
rgb(168, 60, 197) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(213, 118, 237)),
color-stop(100%, rgb(168, 60, 197)));
}
.css3-tombol-download:hover{
text-shadow:0 1px 0 rgb(43, 42, 126);
box-shadow:
inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208);
-webkit-box-shadow:none!important
/* inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208) */;
-moz-box-shadow:
inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208);
background:#4E4DD7;
background:-moz-linear-gradient(top,
rgb(117, 117, 239) 0%,
rgb(60, 59, 196) 100%);
background:-o-linear-gradient(top,
rgb(117, 117, 239) 0%,
rgb(60, 59, 196) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(117, 117, 239)),
color-stop(100%, rgb(60, 59, 196)));
}
.css3-tombol-download:before{
position:relative;
content:'';
display:block;
top:2px;
margin:0 auto;
width:98%;
padding:18px 0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:rgb(168, 60, 197);
background:-moz-linear-gradient(top,
rgb(206, 98, 235) 0%,
rgb(168, 60, 197) 100%);
background:-o-linear-gradient(top,
rgb(206, 98, 235) 0%,
rgb(168, 60, 197) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(206, 98, 235)),
color-stop(100%, rgb(168, 60, 197)));
}
.css3-tombol-download:hover:before{
background:rgb(60, 59, 196);
background:-moz-linear-gradient(top,
rgb(97, 98, 233) 0%,
rgb(60, 59, 196) 100%);
background:-o-linear-gradient(top,
rgb(97, 98, 233) 0%,
rgb(60, 59, 196) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(97, 98, 233)),
color-stop(100%, rgb(60, 59, 196)));
}
.css3-tombol-download:after{
position:relative;
float:right;
content:'';
display:block;
top:-50px;
width:36px;
padding:19px 0;
height:40px;
border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
background:rgba(72, 30, 178, 0.4);
}
.css3-tombol-download:hover:after{
background:rgba(91, 158, 228, 0.4);
}
.css3-tombol-download span{
position:relative;
color:#fefefe;
content:'';
display:block;
top:-24px;
margin:0 auto;
z-index:4;
padding:0 0 0 7px;
text-transform:capitalize;
}
.css3-tombol-download span:before{
position:relative;
float:right;
content:'';
display:block;
top:-6px;
right:12px;
width:12px;
height:12px;
background:rgb(225, 225, 225);
border-radius:1px 1px 0 0;
-webkit-border-radius:1px 1px 0 0;
-moz-border-radius:1px 1px 0 0;
}
.css3-tombol-download span:after{
position:relative;
float:right;
content:'';
top:6px;
right:-5px;
border-style:solid;
border-width:14px 11px 0 11px;
border-color:transparent;
border-top-color:rgb(225, 225, 225);
}
/*************************************/
.css3-tombol-download-sprite{
overflow:hidden;
display:block;
margin:0 auto;
text-decoration:none;
padding:19px 0 17px 0;
text-align:center;
color:rgba(220, 228, 235, 0.9);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7),
0 2px 1px rgba(0, 0, 0, 0.7);
text-transform:uppercase;
font:normal bold 18px/17px Helvetica, Arial;
max-width:160px;
display:block;
background:#273648;
background:-moz-linear-gradient(top,
rgb(55, 69, 83) 0%,
rgb(38, 53, 70) 50%,
rgb(23, 34, 45) 100%);
background:-o-linear-gradient(top,
rgb(55, 69, 83) 0%,
rgb(38, 53, 70) 50%,
rgb(23, 34, 45) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(55, 69, 83)),
color-stop(50%, rgb(38, 53, 70)),
color-stop(100%, rgb(23, 34, 45)));
-webkit-border-radius:55px;
-moz-border-radius:55px;
border-radius:55px;
box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
-moz-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
-webkit-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
}
.css3-tombol-download-sprite:before,
.css3-tombol-download-sprite:after{
position:relative;
float:left;
content:'';
width:110px;
height:1px;
}
.css3-tombol-download-sprite:before{
left:24px;
top:-19px;
background:#656E79;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.5) 30%,
rgba(155, 158, 163, 0.5) 70%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.5) 30%,
rgba(155, 158, 163, 0.5) 70%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(30%, rgba(155, 158, 163, 0.5)),
color-stop(70%, rgba(155, 158, 163, 0.5)),
color-stop(100%, transparent));
box-shadow:0 1px 10px rgb(155, 158, 163);
-moz-box-shadow:0 1px 10px rgb(155, 158, 163);
-webkit-box-shadow:none!important/* 0 1px 10px rgb(155, 158, 163) */;
}
.css3-tombol-download-sprite:after{
left:24px;
top:17px;
background:#585859;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 40%,
rgba(44, 53, 64, 0.2) 60%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 40%,
rgba(44, 53, 64, 0.2) 60%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(40%, rgba(44, 53, 64, 0.8)),
color-stop(60%, rgba(44, 53, 64, 0.8)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:hover{
outline:none;
color:rgba(220, 228, 235, 0.8);
background:#162230;
background: -moz-linear-gradient(top,
rgb(50, 61, 73) 0%,
rgb(24, 36, 50) 50%,
rgb(18, 31, 44) 100%);
background: -o-linear-gradient(top,
rgb(50, 61, 73) 0%,
rgb(24, 36, 50) 50%,
rgb(18, 31, 44) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(50, 61, 73)),
color-stop(50%, rgb(24, 36, 50)),
color-stop(100%, rgb(18, 31, 44)));
}
.css3-tombol-download-sprite:hover:after{
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 20%,
rgba(44, 53, 64, 0.5) 50%,
rgba(44, 53, 64, 0.2) 80%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 20%,
rgba(44, 53, 64, 0.5) 50%,
rgba(44, 53, 64, 0.2) 80%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(20%, rgba(44, 53, 64, 0.7)),
color-stop(50%, rgba(44, 53, 64, 1)),
color-stop(80%, rgba(44, 53, 64, 0.7)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:focus,
.css3-tombol-download-sprite:active{
outline:none;
position:relative;
top:2px;
background:#243547;
background: -moz-linear-gradient(top,
rgb(40, 51, 65) 0%,
rgb(24, 36, 50) 50%,
rgb(19, 31, 44) 100%);
background: -o-linear-gradient(top,
rgb(40, 51, 65) 0%,
rgb(24, 36, 50) 50%,
rgb(19, 31, 44) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(40, 51, 65)),
color-stop(50%, rgb(24, 36, 50)),
color-stop(100%, rgb(19, 31, 44)));
box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
-webkit-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
-moz-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
}
.css3-tombol-download-sprite:focus:before,
.css3-tombol-download-sprite:active:before{
top:-19px;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.2) 30%,
rgba(155, 158, 163, 0.2) 70%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.2) 30%,
rgba(155, 158, 163, 0.2) 70%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(30%, rgba(155, 158, 163, 0.6)),
color-stop(70%, rgba(155, 158, 163, 0.6)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:focus:after,
.css3-tombol-download-sprite:active:after{
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.1) 20%,
rgba(44, 53, 64, 0.3) 50%,
rgba(44, 53, 64, 0.1) 80%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.1) 20%,
rgba(44, 53, 64, 0.3) 50%,
rgba(44, 53, 64, 0.1) 80%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(20%, rgba(44, 53, 64, 0.5)),
color-stop(50%, rgba(44, 53, 64, 0.8)),
color-stop(80%, rgba(44, 53, 64, 0.5)),
color-stop(100%, transparent));
}
Jika anda sudah menerapkan dalam template anda langsung simpan template.
Langakh II
Dalam penerapan tombol DEMO atau DOWNLOAD anda dapat menirukan kode dibawah<a href='http://kang-fathur.blogspot.com' class='css3-tombol-download-sprite'>Download</a>
Catatan : ganti tulisan http://kang-fathur.blogspot.com dengan URL (link) yang akan dituju pada tombol yang baru dibuat
Hasilnya akan seperti ini
Download
Atau
Demo
Semoga ini bermanfaat bagi anda. Trims udah berkunjung di blog Portal Informasi Online ini SELENGKAPNYA atau SEPENUHNYA Sistem Komputer Sitemap 1 2 3 4 5
