»Tutorial»Membuat Tombol Demo (Download) dengan CSS
April 11, 2012

Membuat Tombol Demo (Download) dengan CSS

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>

CSS

.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 0 rgb(165,61,191),inset -1px -1px 0 rgb(165,61,191);
  -webkit-box-shadow:none !important
/* inset 1px 1px 0 rgb(165,61,191),inset -1px -1px 0 rgb(165,61,191) */;
  -moz-box-shadow:inset 1px 1px 0 rgb(165,61,191),inset -1px -1px 0 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 0 rgb(71,71,208),inset -1px -1px 0 rgb(71,71,208);
  -webkit-box-shadow:none !important
/* inset 1px 1px 0 rgb(71,71,208),inset -1px -1px 0 rgb(71,71,208) */;
  -moz-box-shadow:inset 1px 1px 0 rgb(71,71,208),inset -1px -1px 0 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.

HTML

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 :

Kode yang bergaris bawah diatas ganti 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 iniSatank MkrBerkomentar
Bagikan kepada teman!
Garis
Posted byAnonymousatWednesday, April 11, 2012
Labels:,,
300x250

0comments:

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara otomatis.

Subscribe to:Post Comments(Atom)
 
TOP