CSS3: Membuat Tombol Download

Berikut adalah tombol download yang dibuat dengan css3 atau tanpa menggunakan gambar

No Today

Berikut adalah tombol download yang dibuat dengan css3 atau tanpa menggunakan gambar

Last Modif at August 11th, 2011

Hallo Blogger
Tulisan kali ini kita akan share tombol download yang dibuat dengan CSS3, dan versi aslinya(gambar) adalah karya Kang Jeprie, kita hanya mencontek, hanya saja dalam bentuk code dan bukan gambarnya. Sedangkan ide menggambar ini terinspirasi dari Bang Rudy yang sebelumnya telah menggambar tombol download dengan CSS3.

Tombol yang kita buat ini ada dua versi yang pertama, sama dengan yang ada di blog bang rudy azhar(dan mungkin disempurnakan) sedangkan tombol yang kedua bisa di http://psdfreemium.com/colorful-download-button/

Preview CSS3 Tombol download

Berikut adalah preview tombol download dengan CSS3 yang kita buat(silakan disable “load image”)

CSS3 tombol download sprite

CSS3 tombol download

Source CSS3 Tombol download


<html>
<head>
<title>CSS3 botton</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta content="http://desaindigital.com/" name="original image"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.net"/>
<style type="text/css">
/*
CREATED BY :
name : Indam
website : http://www.indaam.net
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
SAMPLE IMAGE :
Name : M Jeprie
Website : http://desaindigital.com
*/
/************************************/
.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));
}
/*************************************/
</style>
</head>
<body>
<div class='box-css3-tombol-download'><a href='' class='css3-tombol-download-sprite'>Download</a></div>
<div class='box-css3-tombol-download'><a href='' class='css3-tombol-download-sprite' style='padding:19px 20px 17px 20px;'>Download now</a></div>
<div class='box-css3-tombol-download'><a href='' class='css3-tombol-download-sprite' style='padding:19px 20px 17px 20px;min-width:175px;'>Download here</a></div>
<!-- -->
<div style='margin-top:20px;' class='box-css3-tombol-download'><a class='css3-tombol-download' href=''><span>download</span></a></div>
<div class='box-css3-tombol-download'><a class='css3-tombol-download' style='width:180px' href=''><span>download now</span></a></div>
<div class='box-css3-tombol-download'><a class='css3-tombol-download' style='width:195px' href=''><span>download here</span></a></div>
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Source by <a style='text-decoration:none;color:red;' href='http://www.indaam.net' target='blank' title='Indam Site'>Indam Site</a> and original image by <a style='text-decoration:none;color:#22d;' href='http://desaindigital.com' target='blank' title='desain digital'>desaindigital.com</a></span>
<!-- regards
http://www.indaam.net -->
</body>
</html>

clue pembuatan

Maaf ya, sedikit cape aku kalau harus jelasin baris-perbaris, saya kasih cluenya aja yah

CSS3 tombol download sprite

Untuk membuat sudut melengkung, kita menggunkan border-radius, lalu box-shadow untuk membuat bayangan, selanjutnya kita tambahkan gradient untuk mempercantik latar. Sedangkan :before dan :After digunakan untuk membuat garis(seperti) atas dan bawah.

CSS3 tombol download

Untuk membuat sudut melengkung, kita menggunkan border-radius, lalu didalam tag a kita tambahkan tag span untuk membuat panah(seperti) lalu pada cssnya kita gunakan :before dan :After untuk membuat element “luar panah” dan panahnya

Catatan

Sekarang tidak susah menggambar dengan CSS3+browser new version, yang sulit adalah ‘Apa yang mau digambar?’
Silakan berkreasi dengan source yang ada, semoga bermanfaat
Oia, -o- saya tambahkan karena, yang saya tahu value syntaks gradient di opera itu sama dengan firefox, dan source diatas hanya saya coba di chrome dan firefox

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

12 thoughts on “CSS3: Membuat Tombol Download”

  1. iskandaria says:

    Keren mas. Kapan-kapan jika saya mosting tentang sesuatu yang bisa didownload, mungkin saya akan pakai model tombol download di atas.

  2. Indam says:

    Tombol itu buatanya Mas Jeprie, saya hanya buat versi cssnya saja.
    Ya silakan mas, warna-warnanya juga bisa diganti…

  3. ganda says:

    Itu gambar yang ada di kepala Aang kok nongol disini? :D
    Buat yang banyak ya, biar saya download :p

  4. indam says:

    Ganda,
    Wah Lama tak nongol, apa kabar bro?
    Hihihihi, mungkin efek dari ketidak sengajaan. Ok bro, kalu ada waktu, nanti saya buat lagi :)

    1. ganda says:

      Baik baik. :D Kan tombol unduh memang seperti itu bentuknya :D Nice

  5. indam says:

    Thanks, tapi ide tombolnya bukan dari kepalaku loh, aku hanya buat versi css3-nya ajah…
    oia, gimana perkemabangan app blackberry-nya?

    1. ganda says:

      Lalu, dari kepala siapa? :p Sekarang lagi buat dua aplikasi, tapi belum ada waktu untuk menyelesaikannya lagi. :D Lagi berhadapan dengan project cukup besar #rahasia :D

  6. indam says:

    Bro Ganda,
    Versi image tombol itu dari mas jeprie.
    Btw, projectnya kerjain sendiri atau tim? Kalau sendiri, hati-hati loh ‘bisa stress nanti’ :) #pengalaman

    1. ganda says:

      Tim. Mana mungkin saya bisa handle sendiri. Projectnya wong dilaksanakan di beberapa kota di Indonesia.

  7. indam says:

    Ganda,
    Owh tim yah, pasti enak yah kerja tim ‘kalo udah buntu, bisa nanya, trus ide-nya juga bisa didiskusikan, beda dengan kerja sendiri, rada stress kalo udah buntu, apalagi si client ‘disuruh-buru’ #mampus
    Well, saya bantu dengan doa ‘semoga projectnya lancar’ :)

    1. ganda says:

      Amin amin.. :D Semoga akhir bulan ini sudah kelar. :D

  8. Djawa says:

    sy masih puyeng dalam urusan css :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-