Membuat Desain Flat Button dengan CSS

Membuat Desain Flat Button dengan CSS - Mendesain tampilan elemen pada suatu website sangatlah penting dan harus diperhatikan, oleh karena itu seorang developer harus memperhatikan semua aspek dalam mendesain suatu tampilan, baik warna, layout dan sebagainya. Contoh sederhana adalah mendesain tampilan button, tampilan button yang tadinya biasa saja bisa kita desain menjadi desain button yang menarik untuk ditampilkan, seperti tutorial berikut yang akan saya bagikan mengenai Membuat Desain Flat Button dengan CSS. Baik langsung saja saya akan praktekan langkah - langkahnya berikut ini.

Langkah 1 : Membuat Desain Flat Button dengan CSS

Seperti biasa, dalam membuat desain kita harus menentukan objek yang akan dijadikan elemen, dalam kasus ini adalah tag a yang akan kita jadikan button. Nah, silahkan kalian buat struktur sederhana HTML untuk membuat flat button berikut ini.

<body>
      <a href="#" class="button">SUBMIT</a>
</body>

Langkah 2 : Membuat Desain Flat Button dengan CSS

Setelah membuat struktur HTML seperti diatas, langkah selanjutnya kita akan desain tampilan flat button dengan CSS3 berikut ini.

@import url('https://fonts.googleapis.com/css?family=Righteous');    
body {
  background-color: #CACBC5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.button {
  border: 5px solid #333333;
  color: #333333;
  display: block;
  font-size: 26px;
  letter-spacing: 0.1rem;
  padding: 15px;
  position: relative;
  text-decoration: none;
  border-radius: 50px;
  width: 200px;
  text-align: center;
  font-family: 'Righteous', cursive;
}

.button::before {
  content: "";
  background-color: #FCD920;
  box-shadow: 5px 5px 0 #3CB5B5,
              10px 10px 0 #E53B51;
  position: absolute;
  left: 0.20rem;
  top: 0.5rem;
  height: 100%;
  z-index: -1;
  transition: all 0.5s ease;
  border-radius: 50px;
  width: 233px;
}

.button:hover::before {
  box-shadow: none;
  left: 0;
  top: 0;
}

Setelah semua sintak telah diketikan, simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya. Maka tampilan flat button akan seperti gambar dibawah ini.

Membuat Desain Flat Button dengan CSS

Bagaimana, cukup menarik bukan desain button yang ditampilkan ? Baik, cukup sekian tutorial tentang Membuat Desain Flat Button dengan CSS, semoga bermanfaat dan selamat mencoba :)

17 Mei 2018

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat