Cara Membuat Efek Button Shift Up dengan CSS3

Saat ini CSS3 sudah tidak diragukan lagi dengan kemampuannya yang cukup powerfull dalam hal mendesain tampilan web, bahkan sekarang ini sudah banyak sekali pengembangan dari teknologi CSS3 ini, contoh dari pengembangan teknologi ini adalah framework yang mungkin sudah familiar bagi kita, yakni Bootstrap, contoh lainnya adalah framework Materialize, Leaf, Uikit dan masih banyak lagi framework-framework yang lainnya. Namun kali ini saya tidak akan membahas framework nya yang akan saya bahas disini adalah kita akan buat implementasi CSS3 yang sebenarnya yakni Cara Membuat Efek Button Shift Up dengan CSS3. Cara membuatnya cukuplah mudah apalagi buat kalian yang telah familiar menggunakan CSS3 ini. Simak langkah-langkahnya berikut ini.

Mungkin sebelumnya kalian bertanya-tanya apa yang dimaksud dengan button Shift Up ? Button Shift Up hanyalah istilah efek yang ada dalam bahasa CSS3 atau juga didalam dunia desain web, Shift Up merupakan efek ketika kursor diarahkan ke area button maka akan terjadi efek perubahan posisi seperti slide ke atas, simple nya seperti itu. Daripada penasaran seperti apa efek Shift Up langsung saja kita praktekan.

Pertama-tama untuk membuat efek ini tentu kita butuh objek sebagai demo efek shift Up, dalam kasus ini saya menggunakan button seperti yang tertera pada judul yakni efek button Shift Up, untuk membuat objek nya silahkan ketikan kode HTML berikut untuk elemen button nya.

<body>
    <button data-text="Shift up">Shift up</button>
</body>

Setelah menentukan objeknya yakni elemen button, kita lanjutkan pada tahapan desain button dan efek Shift Up dengan kode CSS3 berikut ini.

html {
    padding-top: 100px;
    text-align: center;
}

button,
button::before,
button::after {
    border: 5px solid #0cf;
    padding: 0.5em 1em;
}

button {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: transparent;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

button::before,
button::after {
    content: attr(data-text);
    position: absolute;
    right: -5px;
    left: -5px;
    transition: top 300ms;
}

button::before {
    top: 100%;
    color: #fff;
    background-color: #0cf;
}

button:hover::before,
button:focus::before {
    top: -5px;
}

button:active::before {
    color: gold;
}

button::after {
    top: -5px;
    color: #0cf;
}

button:hover::after,
button:focus::after {
    top: -100%;
}

Setelah selesai semua kode diatas diketikan, selanjutnya simpan filenya kemudian kalian bisa buka pada browser masing-masing dan lihat hasilnya. maka akan terlihat objek button yang telah kita buat dengan efek Shift Up nya. Baik cukup sekian tutorial sederhana mengenai Cara Membuat Efek Button Shift Up dengan CSS3. Semoga bermanfaat.

18 Agustus 2017

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