Cara Membuat Efek Slow Shadow Button

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.

Cara Membuat Efek Slow Shadow Button

Bagaiman, menarik bukan button shadow nya ? Baiklah cukup sekian tutorial sederhana mengenai Cara Membuat Efek Slow Shadow Button. Semoga bermanfaat dan selamat mencoba.

3 September 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat