Pembuatan button animasi menggunakan css transition
Hallo teman-teman, salam jumpa kembali…
Di artikel kali ini penulis ingin membahas panduan Penyusunan button animasi menggunakan css transition. Seketika aja ya kita bahas cara pembuatannya…
- Teman-teman salin codingan dibawah ini, kemudian paste ke text editor yang biasanya teman-teman gunakan.
<!DOCTYPE html>
<html>
<head>
<style>
* {padding: 0; margin: 0;}
body {
width: 100%;
margin: auto;
}
.container {
background-color: blue;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: orange;
border: none;
color: white;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: 'sourcecodeaplikasi.info';
font-size: 11px;
color: white;
position: absolute;
opacity: 0;
top: 30px;
right: 0px;
transition: 0.5s;
}
.button:hover {
background-color: blue;
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.button:hover span {
padding-right: 30px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input[type=submit] {
background-color: orange;
border-radius: 5px;
border: none;
color: white;
transition: 0,5s;
}
input[type=submit]:hover {
padding: 30px;
background-color: blue;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<div class=container>
<button class=button style=vertical-align:middle><span>Home</span></button>
<button class=button style=vertical-align:middle><span>Gallery</span></button>
<button class=button style=vertical-align:middle><span>Company</span></button>
<button class=button style=vertical-align:middle><span>Location</span></button>
<button class=button style=vertical-align:middle><span>Contact</span></button>
<input type=text placeholder=Search style=width: 200px; padding: 10px; margin: 5px;>
<input type=submit value=GO style=padding: 10px; margin: 5px;>
</div>
</body>
</html>
2. Penyusunan button animasi menggunakan css transition. Apabila telah, teman-teman dapat lihat sendiri bagi hasil outputnya, atau teman-teman ingin mengganti format button seperti yang teman-teman inginkan.
Kira-kira bagi hasil outputnya seperti di gambar dibawah ini teman-teman :
Nah, Penyusunan button animasi menggunakan css transition. bagi seperti apa hasil animasi button nya, teman-teman dapat mencoba sendiri. Gampang kan teman-teman…
Selamat mencoba yaa… ^_^
Sumber https://kursuswebsite.org
