Cara Membuat Macam-macam Tombol Menggunakan CSS

byArRahim • • 2 min read
0

Alt Text!
Contoh Tombol

Ada beberapa macam cara yang dapat digunakan untuk membuat link download. Bisa langsung menggunakan link biasa atau menggunakan gambar. Namun yang saya ketahui dari beberapa sumber mengatakan bahwa, link eksternal yang menggunakan gambar selain membuat loading blog agak lambat namun juga kurang baik dalam seo (Search engine optimation). Padahal Bentuk-bentuk tombol download yang unik tentu dapat mempercantik tampilan template suatu blog. Oleh karena itu, disini saya coba membagikan cara membuat macam-macam tombol download untuk blog tanpa menggunakan gambar. Cara ini murni menggunakan CSS.

Demo Tombol 1



Cara Membuat Tombol 1
Tombol ini yang paling sering saya jumpai dikala saya blogging kesana-kemari. Bagaimana cara membuatnya? Silahkan ikuti langkah-langkah berikut ini.

Cara Membuatnya
Simpan kode di bawah ini kedalam template blog atau sebelum kode </style> 
input#gobutton{
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    padding:5px 25px; /*add some padding to the inside of the button*/
    background:#35b128; /*the colour of the button*/
    border:1px solid #33842a; /*required or the default border for the browser will appear*/
    /*give the button curved corners, alter the size as required*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*give the button a drop shadow*/
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
    box-shadow: 0 0 4px rgba(0,0,0, .75);
    /*style the text*/
    color:#f3f3f3;
    font-size:1.1em;
    }
    /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
    input#gobutton:hover, input#gobutton:focus{
    background-color :#399630; /*make the background a little darker*/
    /*reduce the drop shadow size to give a pushed button effect*/
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
    box-shadow: 0 0 1px rgba(0,0,0, .75);
    }

Contoh Cara Menggunakannya :
<input id="gobutton" type="submit" value="download!" />

Silahkan Ganti kata Download yang sudah saya tandai dengan warna Kuning tersebut dengan kata-kata anda sendiri. Misalnya Go! atau Klik disini.

Demo Tombol 2



Tombol yang kedua ini juga sering saya jumpai dikala saya blogging. Bagaimana cara membuatnya? Silahkan ikuti langkah-langkah berikut ini.

Cara Membuat Tombol ke2
Silahkan salin css berikut ini, tempatkan pada tag setelah </style> 
input#bigbutton {
width:500px;
background: #3e9cbf; /*the colour of the button*/
padding: 8px 14px 10px; /*apply some padding inside the button*/
border:1px solid #3e9cbf; /*required or the default border for the browser will appear*/
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
/*style the text*/
font-size:1.5em;
font-family:Oswald, sans-serif; /*Oswald is available from https://www.google.com/webfonts/specimen/Oswald*/
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
color: #fff;
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
/*give the corners a small curve*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/***SET THE BUTTON'S HOVER AND FOCUS STATES***/
input#bigbutton:hover, input#bigbutton:focus {
color:#dfe7ea;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}

Cara Menggunakannya seperti di bawah ini:
<input id="bigbutton" type="submit" value="Download" />

Demo Tombol 3


Cara Membuatnya:
Salinlah kode dibawah ini dan tempatkan pada sebelum kode </style>
input#round{
    width:100px; /*same as the height*/
    height:100px; /*same as the width*/
    background-color:#ff0000;
    border:1px solid #ff0000; /*same colour as the background*/
    color:#fff;
    font-size:1.6em;
    /*set the border-radius at half the size of the width and height*/
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    /*give the button a small drop shadow*/
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
    box-shadow: 2px 2px 15px rgba(0,0,0, .75);
    }
    /***NOW STYLE THE BUTTON'S HOVER STATE***/
    input#round:hover{
    background:#c20b0b;
    border:1px solid #c20b0b;
    /*reduce the size of the shadow to give a pushed effect*/
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    }

Cara Memanggilnya seperti ini:
<input id="round" type="submit" value="Go!" />
Gimana Teman-teman Contoh Tombol Downloadnya?

Untuk Menginputkan link downloadnya silahkan teman-teman pelajari sendiri cara membuat link eksternal. Browsing aja lagi digoogle banyak koq yang sudah membuat panduannya. Jika Anda masih belum puas, berikut ini saya contoh lagi beberapa contoh.

Demo Tombol 4, 5, 6, 7

30K Android Daftar sekarang & Download Free Player Join for Free & Download $20 DVD Register right now & Download $5 web code Log in Now & Download
















Kode CSS nya : 
.a-btn{
    background: #275713;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background: -webkit-linear-gradient(top, #3C5A3C 0%, #508148 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:90px;
    padding-right:105px;
    height:90px;
    display:inline-block;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position:absolute;
    left:15px;
    top:13px;
    border:none;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position:absolute;
    font-size:36px;
    top:18px;
    left:18px;
    color:#bde086;
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    opacity:0;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn-text{
    padding-top:13px;
    display:block;
    font-size:30px;
    text-shadow:0px -1px 1px #5d81ab;
    color: #fff;
font-family: Oswald;
}
.a-btn-text small{
    display:block;
    font-size:11px;
    letter-spacing:1px;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:80px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    border:1px solid rgba(0,0,0,0.5);
    background:#5b5b5b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbYxlT4eXvBlL-zj17wKqwwSd9mB-hS9Q0uCKm5_FKeyFGmYa3ZcBrOiWKk83XGLJt7GyJ5wySan4SV8jgENILqnoYC5Yf_O_rSptkJQ4kcX_BBle9nOiRqYmOlwnKPWepAG8jXTJJ02M/s1600/arrow_down.png) no-repeat center center;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn:hover{
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
    opacity:0;
}
.a-btn:hover .a-btn-slide-text{
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
    background-color: #45BC32;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
}
.a-btn:active .a-btn-icon-right span{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}
Sedangkan Kode Html nya : 
<a href="#" class="a-btn">
      <span class="a-btn-slide-text">30K</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKcD4uXUjy-aToHvqXRd3ls890QcxRSj5TR1k8rp_0fU6eqMSs468rpjm1wDl-x4b0DE-KOfKroc5gtdUYuMJ7uOxfclo1zuJACTHtOYxrewh2wKM9rWhja9lGfD9HaXsX5QcsbasAoKI/s1600/Android-FileTransfer-icon.png" alt="Android" />
      <span class="a-btn-text"><small>Daftar sekarang &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">Free</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjyXmE7lLEvBm_I2Xzz3pPGAQ3DjRGdmcM3P9Gh7t7H7hgQ_WuLeNY3KE0y-A0u4EWIOcKpIdeoZAry6Yv3J__LTsOm1UE6snwh2J4wBlQu5PhNhhRa14xrBfsI0k4Z3_WP8apqXYH24/s1600/DivXPlayer-icon.png" alt="Player" />
      <span class="a-btn-text"><small>Join for Free &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">$20</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcMNymHqvtlln1SpnyFk56C1esjZqg9I4BMbS5UjCUVOV5oKc7AXwouh6Tf5kvqu4IKVeU2IRkqhnmdPpWjTxk6ERxzWkt1jTOZMpfB2ZFE879lN6PTfGJsK4ztTvkaaqRb1Qf3HPZMw/s1600/DVD-icon.png" alt="DVD" />
      <span class="a-btn-text"><small>Register right now &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">$5</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjleLYtN35uJ8k7iKEiJBDVJbOg8wORZnUva6zsuYz264fvXGboomrK8BADo4K7buT0zL4vyd3gO7bmazFdfpQOOaaDJalhQT_hRBS9Mzz-5VP5H5VcWOipBWoaG6B39AB_NBdCILhE3s/s1600/seo-web-code-icon.png" alt="web code" />
      <span class="a-btn-text"><small>Log in Now &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>

Itu lah contoh tombol download yang bisa saya bagikan untuk hari ini. Jika ada pertanyaan silahkan aja tuliskan pada kolom omentar di bawah. atau juga anda bisa menghubungi saya melalui halaman kontak yang sudah saya sediakan.

Terimakasih Kamu sudah membaca Tulisan kami mengenai Cara Membuat Macam-macam Tombol Menggunakan CSS. Semoga Bermanfaat dan jangan lupa bagikan artikel ini dengan klik link berbagi dibawah ini.

4.94 / 169 rates
ArRahim

Terlahir untuk mengekspresikan, bukan untuk membuat terkesan

Posting Komentar

Lebih baru Lebih lama