Cara Membuat Efek Slow Shadow Button
03/09/2017 Risman Hakim 3176 Website
CSS3 telah memberikan kemudahan untuk kita dalam hal pembuatan desain web, dengan CSS3 kita bisa melakukan animasi atau efek pada halaman website, contohnya adalah animasi warna, animasi 3D dan animasi-animasi lainnya. Nah berikut ini saya akan kasih tutorial sedrhana buat kalian yang ingin membuat animasi sederhana dengan CSS3 yakni Cara Membuat Efek Slow Shadow Button, seperti apa cara membuatnya langsung saja simak langkah-langkahnya berikut ini.
untuk membuat efek slow shadow, kita akan membuat struktur dan objek terlebihdahulu, dalam hal ini objek yang digunakan adalah button, untuk membuatnya silahkan kalian bisa ketikan kode HTML berikut.
<body>
<div class="btn"><a href="">Button</a></div>
</body>Kalau biasanya kalian membuat button dengan tag button atau namun dalam kasus ini tampilan button dibuat dengan selector class dimana nantinya kita akan desain menjadi bentuk button, setelah struktur telah dibuat seperti diatas, selanjutnya adalah mendesai tampilan button nya dengan CSS3. Berikut kode CSS3 untuktampilan button.
html {
background-color: #fff;
}body {
font: 150%/1.5 monospace, sans-serif;
color: #3498db;
padding: 32rem;
}
.btn a {
text-decoration: none;
color: #3498db;
font-weight: bold;
}.btn {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 200px auto;
border-style: solid;
border-width: 4px;
display: inline-block;
color: #3498db;
max-width: 200px;
min-height: 70px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 13px;
box-shadow: 0px 0px 0 #3498db,
-1px 1px 0 #3498db,
-2px 2px 0 #3498db,
-3px 3px 0 #3498db,
-4px 4px 0 #3498db,
-5px 5px 0 #3498db,
-6px 6px 0 #3498db,
-7px 7px 0 #3498db,
-8px 8px 0 #3498db,
-9px 9px 0 #3498db,
-10px 10px 0 #3498db;
transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-webkit-transition: all 3s ease-in-out;
}.btn:hover {
box-shadow: 0px 0px 0 #3498db;
left: -25px;
top: 13px;
cursor: pointer;
}Pada kode CSS3 diatas kita telah mendesain tampilan button menjadi sedemikian rupa dan tentu yang paling utama adalah efek atau animasi shadow nya, efek shadow telah kita buat pada kode transition, dimana ketika tombol button diklik akan ada perubahan shadow secara perlahan (slow) . Setelah semua kode diketikan, simpan filenya kemudian jalankan pada browser masing-masing dan lihat hasilnya.
Bagaiman, menarik bukan button shadow nya ? Baiklah cukup sekian tutorial sederhana mengenai Cara Membuat Efek Slow Shadow Button. Semoga bermanfaat dan selamat mencoba.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
