Cara Membuat Efek Transisi pada Button

06/09/2018    Risman Hakim    62     Website

Cara Membuat Efek Transisi pada Button - Transisi merupakan suatu efek yang terdapat pada CSS yang dapat kita gunakan untuk menambah style efek pada sebuah objek, tentu objeknya juga bermacam - macam dan hampir semua element dan objek bisa ditambahkan efek transisi. Misalnya saja pada objek gambar, element button dan elemen - elemen yang lainnya. Nah, pada kesempatan kali ini saya akan kasih referensi dan tutorial efek transisi yaitu bagaimana Cara Membuat Efek Transisi pada Button. Mungkin diantara kalian ada yang ingin membuat elemen button dengan efek transisi, tidak ada salahnya mencoba tutorialnya berikut ini.

Langkah 1 : Cara Membuat Efek Transisi pada Button

Untuk membuat efek transisi pada button, yang pertama kita akan membuat elemen button sebagai objek utama yang akan dikenai efek transisi dan tentunya membuat struktur sederhana HTML seperti berikut ini.

<body>
    <div id="container">
          <a href="#" class="btn-1">Button Awesome !</a>
          <a href="#" class="btn-2">Button Awesome !</a>
    </div>
</body>

Langkah 2 : Cara Membuat Efek Transisi pada Button

Langkah berikutnya setelah membuat struktur dan elemen button seperti diatas, kita akan desain mulai dari layout dan yang paling penting efek transisi pada button nya, untuk itu silahkan ketikan sintak CSS berikut untuk membuat efek transisi pada button.

@import url('https://fonts.googleapis.com/css?family=Righteous');
body {
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Righteous', cursive;
    font-weight: bold;
    font-size: 14px;
}

#container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -86px;
    margin-left: -89px;
    text-align: center;
}

#container a {
    display: block;
    margin: 20px auto;
    max-width: 180px;
    text-decoration: none;
    border-radius: 50px 50px;
    padding: 20px 30px;
    letter-spacing: 2px;
    transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

#container .btn-1 {
    color: #b71540;
    box-shadow: #b71540 0 0px 0px 3px inset;
}

#container .btn-1:hover {
    color: rgba(255, 255, 255, 0.85);
    box-shadow: #b71540 0 0px 0px 40px inset;
}

#container .btn-2 {
    color: #1e3799;
    box-shadow: #1e3799 0 0px 0px 3px inset;
}

#container .btn-2:hover {
    color: rgba(255, 255, 255, 0.85);
    box-shadow: #1e3799 0 80px 0px 3px inset;
}

Setelah semua sintak CSS dan HTML telah kalian ketikan, silahkan simpan filenya kemudian buka pada browser masing - masing untuk melihat hasil akhir dari button yang telah diberikan efek transisi.

Baik, cukup sekian tutorial kali ini, semoga tutorial Cara Membuat Efek Transisi pada Button bisa bermanfaat dan menambah referensi dalam membuat efek transisi, 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