Membuat Animasi Teks Button dengan CSS3

Membuat Animasi Teks Button dengan CSS3 - Halo semua... pada kesempatan kali ini saya akan berbagi tutorial yang masih berhubungan dengan animasi menggunakan CSS3 yaitu bagaimana Membuat Animasi Teks Button dengan CSS3. Pasti buat kalian sudah tidak asing lagi yah dengan tombol button yang terdapat didalam sebuah website, begitu banyak jenis, dan juga kreasi tampilan button yang ditampilkan pada setiap website. Nah, kali ini saya akan sedikit berbagi tutorial membuat button dengan dikombinasikan dengan animasi pada teks nya. Seperti apa cara membuatnya, langsung saja kita praktekan berikut ini.

Langkah 1 : Membuat Animasi Teks Button dengan CSS3

Baiklah, kita mulai dengan langkah pertama, yakni buat file terlebih dahulu dengan nama index.html kemudian silahkan ketikan struktur HTML sederhana seperti berikut.

<body>
    <a href="https://www.dumetschool.com/" target="_blank" class="button">
      <span data-text="S">S</span>
      <span data-text="U">U</span>
      <span data-text="B">B</span>
      <span data-text="M">M</span>
      <span data-text="I">I</span>
      <span data-text="T">T</span>
    </a>
</body>

Pada kasus ini, saya membuat bentuk button tidak seperti biasanya, karena jika biasanya kalian membuat button dengan cara mengetikan tag button, lain dengan kasus ini, karena kasus yang sedang kita buat adalah membuat animasi teks didalam button nya, untuk itu kita wajib merangkai huruf seperti sintak diatas.

Langkah 2 : Membuat Animasi Teks Button dengan CSS3

Setelah membuat struktur seperti diatas, barulah kita mulai mendesaintampilan button dengan sintak CSS3 dan tentu yang utamnya adalah membuat animasi teks nya. Silahkan ketikan sintak CSS3 seperti berikut.

@import url('https://fonts.googleapis.com/css?family=Righteous');
html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DAD9DE;
}

.button {
    width: 200px;
    height: 60px;
    border: 3px solid #000000;
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    overflow: hidden;
    text-decoration: none;
    border-radius: 32px;
}

.button span {
    display: inline-block;
    color: #f90;
    transition: 0.5s;
    font-family: 'Righteous', cursive;
}

.button span:nth-child(odd) {
    transform: translateY(-100%);
}

.button span:nth-child(even) {
    transform: translateY(100%);
}

.button span::before {
    content: attr(data-text);
    position: absolute;
    color: #000000;
}

.button span:nth-child(odd)::before {
    transform: translateY(100%);
}

.button span:nth-child(even)::before {
    transform: translateY(-100%);
}

.button:hover span {
    transform: translateY(0);
}

Pada sintak CSS3 diatas, animasi yang dibuat dengan memanfaatkan property yang terdapat pada CSS3, yakni transition untuk efek transisinya, dan transform untuk menentukan arah animasi, dalam kasus ini proerty yang dipakai adalah transform dengan value translateY untuk posisi animasi dari atas ke bawah atau sebaliknya.

Nah, setelah semua sintak telah diketikan, simpan filenya terlebih dahulu kemudian silahkan jalankan pada browser masing - masing dan lihat hasilnya. Maka ketika kalian mengarahkan kursor kearah button akan terjadi animasi pergerakan teks dari arah atas button. Selesai

Bagaimana, cukup menarik bukan animasi yang ditampilkan ? Baik, cukup sekian tutorial sederhana CSS3 mengenai bagaimana Membuat Animasi Teks Button dengan CSS3, semoga bisa bermanfaat dan menambah referensi dalam membuat animasi ataupun efek pada tampilan webiste. Selamat mencoba :)

29 April 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 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