Bagaimana cara membuat tombol transisi ruang nama dengan CSS? Kali ini saya akan menjelaskan tutorial yang saya dapatkan sumbernya dibuat oleh John Daiello.
Di sini kita akan membuat enam pasang tombol transisi dengan arah yang berlawanan.
Terlebih dulu kita buat atribut div class
beri nilai o-display-grid
<div class="o-display-grid"> </div>
Di dalam div
inti di atas masukan 6 pasang tombol transisi secara berurutan.
Sebelumnya berikan judul dengan heading 1.
<h1>Tombol Transisi Ruang Nama dengan CSS</h1>
Sekarang buat tombol transisi Box In dan Box Out. Tiap sub div kedua tombol ini buat div class
dan beri nilai o-display-grid_item
. Lalu di setiap sub div
tersebut buat elemen button dan beri class dengan nilai c-button c-button--box-in
untuk Box In dan c-button c-button-box--out
untuk Box Out.
<div class="o-display-grid__item"> <button class="c-button c-button--box-in">Box In</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--box-out">Box Out</button> </div>
5 pasang tombol transisi yaitu dan beri nilai button class
masing-masing seperti.
From Bottom -> c-button c-button--from-bottom
dan From Top -> c-button c-button--from-bottom
;
From Left -> c-button c-button--from-left
dan From Right-> c-button c-button--from-right
;
Filled Box In -> c-button c-button--box-out c-button--filled
dan Filled Box Out -> c-button c-button--box-in c-button--filled
;
Filled From Bottom -> c-button c-button--from-bottom c-button--filled
dan Filled From Top -> c-button c-button--from-top c-button--filled
;
Filled From Left -> c-button c-button--from-left c-button--filled
dan Filled From Right -> c-button c-button--from-right c-button--filled
.
Maka bentuk markup html yang kita buat akan seperti ini:
<h1>Tombol Transisi Ruang Nama dengan CSS<h1> <div class="o-display-grid"> <div class="o-display-grid__item"> <button class="c-button c-button--box-in">Box In</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--box-out">Box Out</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--from-bottom">From Bottom</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--from-top">From Top</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--from-left">From Left</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--from-right">From Right</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--box-in c-button--filled">Filled Box In</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--box-out c-button--filled">Filled Box Out</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--from-bottom c-button--filled">Filled From Bottom</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--from-top c-button--filled">Filled From Top</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--from-left c-button--filled">Filled From Left</button> </div> <div class="o-display-grid__item"> <button class="c-button c-button--from-right c-button--filled">Filled From Right</button> </div> </div>
Selanjutnya kita buat CSS nya sehingga akan muncul tombol animasi transisi yang kita inginkan.
Buat grid inti yang akan membungkus grid tiap item tombol transisi.
.o-display-grid { display: flex; flex-wrap: wrap; max-width: 45em; margin: 0 auto; } .o-display-grid__item { flex-grow: 1; flex-basis: 50%; text-align: center; padding: 1em 2em; }
Untuk tombol utama c-button
, buatkan seperti ini.
.c-button { border: 3px solid #1481ba; border-radius: 0; color: #1481ba; background: #fff; text-transform: uppercase; font-size: 1em; line-height: 1.7em; font-weight: bold; letter-spacing: .1em; font-family: "Roboto Condensed", sans-serif; padding: .5em 1.5em; cursor: pointer; transition: all .5s; }
Berikutnya untuk menampilkan enam pasang tombol transisi yang berbeda, silahkan Anda masukan kode css ini.
.c-button--box-in { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--box-in:hover { box-shadow: inset 0 0 0 100vmax #1481ba; color: #fff; } .c-button--box-out { box-shadow: inset 0 0 0 100vmax #fff, inset 0 0 0 100vmax #1481ba; } .c-button--box-out:hover { box-shadow: inset 0 0 0 0 #fff, inset 0 0 0 100vmax #1481ba; color: #fff; } .c-button--from-bottom { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--from-bottom:hover { box-shadow: inset 0 -100vmax 0 0 #1481ba; color: #fff; } .c-button--from-top { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--from-top:hover { box-shadow: inset 0 100vmax 0 0 #1481ba; color: #fff; } .c-button--from-left { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--from-left:hover { box-shadow: inset 100vmax 0 0 0 #1481ba; color: #fff; } .c-button--from-right { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--from-right:hover { box-shadow: inset -100vmax 0 0 0 #1481ba; color: #fff; } .c-button--filled { background: #1481ba; color: #fff; box-shadow: inset 0 0 0 0 #fff; } .c-button--filled.c-button--box-in:hover { box-shadow: inset 0 0 0 100vmax #fff; color: #1481ba; } .c-button--filled.c-button--box-out { box-shadow: inset 0 0 0 100vmax #1481ba, inset 0 0 0 100vmax #fff; } .c-button--filled.c-button--box-out:hover { box-shadow: inset 0 0 0 0 #1481ba, inset 0 0 0 100vmax #fff; color: #1481ba; } .c-button--filled.c-button--from-bottom:hover { box-shadow: inset 0 -100vmax 0 0 #fff; color: #1481ba; } .c-button--filled.c-button--from-top:hover { box-shadow: inset 0 100vmax 0 0 #fff; color: #1481ba; } .c-button--filled.c-button--from-left:hover { box-shadow: inset 100vmax 0 0 0 #fff; color: #1481ba; } .c-button--filled.c-button--from-right:hover { box-shadow: inset -15em 0 0 0 #fff; color: #1481ba; } .c-button--disabled { border-color: #ccc; } .c-button--disabled:hover { cursor: not-allowed; }
Stylesheet lengkap dengan kode css seperti di bawah ini:
* { box-sizing: border-box; } h1 { color: #37392e; font-size: 3.5em; } body { background: #F1F4F1; font-family: "Roboto Condensed", sans-serif; text-align: center; } .o-display-grid { display: flex; flex-wrap: wrap; max-width: 45em; margin: 0 auto; } .o-display-grid__item { flex-grow: 1; flex-basis: 50%; text-align: center; padding: 1em 2em; } .c-button { border: 3px solid #1481ba; border-radius: 0; color: #1481ba; background: #fff; text-transform: uppercase; font-size: 1em; line-height: 1.7em; font-weight: bold; letter-spacing: .1em; font-family: "Roboto Condensed", sans-serif; padding: .5em 1.5em; cursor: pointer; transition: all .5s; } .c-button--box-in { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--box-in:hover { box-shadow: inset 0 0 0 100vmax #1481ba; color: #fff; } .c-button--box-out { box-shadow: inset 0 0 0 100vmax #fff, inset 0 0 0 100vmax #1481ba; } .c-button--box-out:hover { box-shadow: inset 0 0 0 0 #fff, inset 0 0 0 100vmax #1481ba; color: #fff; } .c-button--from-bottom { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--from-bottom:hover { box-shadow: inset 0 -100vmax 0 0 #1481ba; color: #fff; } .c-button--from-top { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--from-top:hover { box-shadow: inset 0 100vmax 0 0 #1481ba; color: #fff; } .c-button--from-left { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--from-left:hover { box-shadow: inset 100vmax 0 0 0 #1481ba; color: #fff; } .c-button--from-right { box-shadow: inset 0 0 0 0 #1481ba; } .c-button--from-right:hover { box-shadow: inset -100vmax 0 0 0 #1481ba; color: #fff; } .c-button--filled { background: #1481ba; color: #fff; box-shadow: inset 0 0 0 0 #fff; } .c-button--filled.c-button--box-in:hover { box-shadow: inset 0 0 0 100vmax #fff; color: #1481ba; } .c-button--filled.c-button--box-out { box-shadow: inset 0 0 0 100vmax #1481ba, inset 0 0 0 100vmax #fff; } .c-button--filled.c-button--box-out:hover { box-shadow: inset 0 0 0 0 #1481ba, inset 0 0 0 100vmax #fff; color: #1481ba; } .c-button--filled.c-button--from-bottom:hover { box-shadow: inset 0 -100vmax 0 0 #fff; color: #1481ba; } .c-button--filled.c-button--from-top:hover { box-shadow: inset 0 100vmax 0 0 #fff; color: #1481ba; } .c-button--filled.c-button--from-left:hover { box-shadow: inset 100vmax 0 0 0 #fff; color: #1481ba; } .c-button--filled.c-button--from-right:hover { box-shadow: inset -15em 0 0 0 #fff; color: #1481ba; } .c-button--disabled { border-color: #ccc; } .c-button--disabled:hover { cursor: not-allowed; }
Leave a Reply