Cara Membuat Efek Tombol Button dengan CSS3

Efek dan animasi merupakan suatu elemen yang akan membuat tampilan menjadi lebih menarik khusus nya pada sebuah website, tentu efek dan animasi ini sangat bermacam-macam bentuk nya salah satu contoh bentuk efek dan animasi dalam sebuah tampilan website adalah berupa slide, perubahan warna, gambar dan lain sebagainya. Nah, berikut ini ada satu tutorial dimana kita akan membuat satu buah efek yakni kita akan mempelajari bagaimana Cara Membuat Efek Tombol Button dengan CSS3. simak selengkap nya berikut ini.

Dalam pembuatan efek atau animasi pada website tentu kita harus memperhatikan elemen apa yang akan diberikan efek, dalam kasus ini kita akan memberikan efek terhadap teks, berikut sintak HTML5 untuk membuat elemen teks dengan a href.

<body>
	<a href="" class="button">Home</a>
</body>

Setelah kita menentukan elemen yang akan diberikan efek, selanjutnya kita akan desain elemen tersebut dengan sintak CSS3 dan memberikan efek seperti tombol pada elemen teks nya.

@import url('https://fonts.googleapis.com/css?family=Fresca');

html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background: #FFF;
    font-size: 62.5%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body {
    background-color: #FFF;
    color: #45555F;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 160%;
    font-family: 'Fresca', sans-serif;
}

a{
  text-decoration: none;
  display: block;
  }

.button{
  color: #222;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  letter-spacing: .2em;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 0.875em;
  width: 140px;
  text-align: center;
  padding: 10px 15px;
  margin-left: 20px;
}

.button:hover{
  letter-spacing: 0;
  color: white
}

.button:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #6284FF;
  z-index: -1;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.button:hover:after{
  height: 100%;
}

Setelah semua sintak HTML dan CSS3 telah diketikan semua langkah selanjutnya adalah simpan file nya kemudian silahkan buka pada browser masing-masing dan lihat hasil nya. Maka ketikan kita mengarahkan kursor terhadap elemen teks nya akan terlihat efek tombol dan kalau kita klik elemen tersebut akan ada efek lagi yang terjadi. Baiklah itu tadi sedikit tutorial tentang bagaimana Cara Membuat Efek Tombol Button dengan CSS3. semoga bermafaat dan selamat mencoba 🙂

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *