Membuat Desain Flat Button dengan CSS

17/05/2018    Risman Hakim    762     Website

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 :)

Web Design, HTML CSS, website

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