Cara Membuat Macam-macam Tombol Menggunakan CSS
Hi, berjumpa kembali di blog AUTOGOBLOOG , pada kali ini akan membawakan mengenai Cara Membuat Macam-macam Tombol Menggunakan CSS simak selengkapnya
Ada beberapa macam kaidah yang dapat digunakan untuk melahirkan link download. Bisa langsung memakai link biasa alias memakai gambar. Namun yang saya ketahui dari beberapa sumber mengatakan bahwa, link eksternal yang memakai goresan kecuali melahirkan loading blog agak lambat akan tetapi juga kurang baik pada seo (Search engine optimation). Padahal Bentuk-bentuk benjol download yang unik tentu dapat mempercantik pengejawantahan template suatu blog. Oleh karena itu, disini saya coba membagikan kaidah melahirkan macam-macam benjol download untuk blog tanpa memakai gambar. Cara ini murni memakai CSS.
Demo Tombol 1
Cara Membuat Tombol 1
Tombol ini yang paling sering saya jumpai dikala saya blogging kesana-kemari. Bagaimana kaidah membuatnya? Silahkan ikuti langkah-langkah beserta ini.
Cara Membuatnya
Simpan asas di kaki (gunung) ini kedalam template blog alias sebelum asas </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 gandar required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a anjlok 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 anjlok 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 telah saya tandai dengan warna Kuning tersebut dengan cakap anda sendiri. Misalnya Go! alias Klik disini.
Demo Tombol 2
Tombol yang kedua ini juga sering saya jumpai dikala saya blogging. Bagaimana kaidah membuatnya? Silahkan ikuti langkah-langkah beserta ini.
Cara Membuat Tombol ke2
Silahkan salin css beserta 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: suplemen 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: suplemen 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: suplemen 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: suplemen 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: suplemen 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: suplemen 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
Cara Menggunakannya bagai di kaki (gunung) ini:
<input id="bigbutton" type="submit" value="Download" />
Demo Tombol 3
Cara Membuatnya:
Salinlah asas dibawah ini dan tempatkan pada sebelum asas </style>
input#round
width:100px; /*same gandar the height*/
height:100px; /*same gandar the width*/
background-color:#ff0000;
border:1px solid #ff0000; /*same colour gandar 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 anjlok 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 bagai ini:
<input id="round" type="submit" value="Go!" />Gimana Teman-teman Contoh Tombol Downloadnya?
Untuk Menginputkan link downloadnya silahkan teman-teman pelajari sendiri kaidah melahirkan link eksternal. Browsing aja lagi digoogle berjibun koq yang telah melahirkan panduannya. Jika Anda masih belum puas, beserta ini saya contoh lagi beberapa contoh.
Demo Tombol 4, 5, 6, 7
30K
Daftar sekarang & Download
Free
Join for Free & Download
$20
Register right now & Download
$5
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/AVvXsEjid2EfodZ9sxyhyyUuOgKNZ23Al6ab021s6_3pvLoreZZBxK22Fm3zLpsD8mpCCJ5GBXqWaldwMOpZZngr_QAk8v3KtxMh0a4V4mwKAkuCdV5kFEaIA1ZVzL_bSEg7tGZ4EEtRYtXg1jk/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/AVvXsEjPBHYMmvCO38kj_HhHrAozxmfkOfRxCtXFb0C0VX3JYD8a8HMRKGObnUOqoAwcTTFgrFVBkd4MqIKHmEDyAXrPQBNX2LbEsNfpL7tO9oxoMC5NKkYVciBC9sF7raaTxDszSz2ngOiud7o/s1600/Android-FileTransfer-icon.png" alt="Android" />
<span class="a-btn-text"><small>Daftar sekarang &</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/AVvXsEj9PLj2ncx9IWFPpMS2_13JdjSiPAF1JbDZ04yTEpX7eVJRBaHMn9EKlH0yoMO-xJaT0RzllVn-agAGnpsTX5toJ9wC9E3kIq2oO24nNU0IM7-N5PdmJ9Xi5aMGy43xtJ4pBkLDi4MZifQ/s1600/DivXPlayer-icon.png" alt="Player" />
<span class="a-btn-text"><small>Join for Free &</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/AVvXsEg8Tpe6ICNX7OEawU8fgh14OHvv8tQPMbWJ3EYg1Tg3VpciWhGAxJNJInDk8TtQcIZgyxYiH2gxrD2Tu2COkLiJAE_UCTo5OL2uQyAaM9k1hPHTxvMwBUOw5o26sCGh33UPL2fUeaYQLhg/s1600/DVD-icon.png" alt="DVD" />
<span class="a-btn-text"><small>Register right now &</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/AVvXsEgzNSNvQA7BFRxe3SZThklI3Kou6lopNjdydhbEMXTy4kkmkiknWrdusqdWQKdSsJve1ZRgsJD-xqJx8pnjTYlKO9aVKRwzZ1K1KnGEG7Oihjow4AJf3-lb1BND9hP-MyKu5YzRSkXZgH8/s1600/seo-web-code-icon.png" alt="web code" />
<span class="a-btn-text"><small>Log in Now &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>Itu lah contoh benjol download yang bisa saya bagikan untuk hari ini. Jika ada pertanyaan silahkan aja tuliskan pada kolom omentar di bawah. alias juga anda bisa menghubungi saya melalui halaman pergesekan yang telah saya sediakan.
Begitulah detil perihal Cara Membuat Macam-macam Tombol Menggunakan CSS semoga artikel ini bermanfaat terima kasih
Artikel ini diposting pada kategori
Belum ada Komentar untuk "Cara Membuat Macam-macam Tombol Menggunakan CSS"
Posting Komentar