Desain Flat Button dengan HTML CSS
Halo teman teman dumenity, kembali lagi di panduan panduan blog Source Code Aplikasi, ngomong ngomong mengenai desain, Desain menarik betul-betul berpengaruh di tampilan web kita, agar pengunjung dapat betah berlama lama di web kita. di pembahasan kali ini kita akan belajar mengenai cara merancang Desain Flat Button dengan HTML CSS.
bikin file index. html ketikan kode berikut
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Flat Button</title>
</head>
<body>
<div class=container>
<a href=javascript:void(0); class=btn whooooa>Source Code Aplikasi</a>
<!-- <h1>Flat Button Family</h1> -->
<a href=javascript:void(0); class=btn>Snap</a>
<a href=javascript:void(0); class=btn inverse>Inverse</a>
<p>Nearly flat buttons.</p>
<a href=javascript:void(0); class=btn winner>Winner</a>
<a href=javascript:void(0); class=btn create>Create</a>
<a href=javascript:void(0); class=btn avoid>Avoid</a>
<a href=javascript:void(0); class=btn danger>Unsubscribe</a>
<p></p>
<a href=javascript:void(0); class=btn winner style=border-radius:0>SANS-RADIUS</a>
</div>
<div class=lightbg>
<!-- <p>Working Composites.</p> -->
<a href=javascript:void(0); class=btn>Snap</a>
<a href=javascript:void(0); class=btn winner >Winner</a>
<a href=javascript:void(0); class=btn create >Avoid</a>
<a href=javascript:void(0); class=btn avoid>Create</a>
<a href=javascript:void(0); class=btn danger>Unsubscribe</a>
<hr />
<a href=javascript:void(0); class=btn winner inverse >Winner</a>
<a href=javascript:void(0); class=btn create inverse>Create</a>
<a href=javascript:void(0); class=btn avoid inverse>Avoid</a>
</div>
</body>
</html>
setelah itu css nya kita bikin seperti berikut.
hr {
border: none;
}
body {
background: #222;
font-family: Advent Pro;
color: white;
}
.container {
background: #333;
}
.btn:hover {
border-bottom-width: 4px;
margin-bottom: 22px;
}
.btn {
display: inline-block;
vertical-align: top;
padding: 8px 14px 10px;
margin-top: 1px;
margin-bottom: 25px;
border: 1px solid;
color: white;
border-radius: 9px;
font-size: 18px;
font-weight: 300;
text-decoration: none;
}
.btn.inverse {
color: #222;
background-color: white;
border-color: #b7b7b7;
}
.btn + .btn {
margin-left: 0.5em;
}
.btn.create {
color: lightgreen;
}
.btn.winner {
color: skyblue;
}
.btn.avoid {
color: tomato;
}
.btn.danger {
border-color: transparent;
color: salmon;
}
.lightbg .btn {
color: #111;
}
.lightbg .btn + .btn {
margin-left: 0.5em;
}
.lightbg .btn.create {
color: tomato;
}
.lightbg .btn.winner {
color: deepskyblue;
}
.lightbg .btn.avoid {
color: forestgreen;
}
.lightbg .btn.danger {
border-color: transparent;
color: salmon;
}
.btn:hover.danger {
color: tomato;
margin-bottom: 24px;
border: 1px dotted;
}
.btn.whooooa {
float: right;
margin-right: 1px;
padding-bottom: 8px;
font-size: 22px;
opacity: 0.06;
-webkit-transition: all 0.8s ease-out;
}
.btn.whooooa:hover {
color: firebrick;
opacity: 0.96;
border: 4px double;
border-bottom: 34px dashed;
border-top: 6px double;
padding-top: 18px;
}
.container,
.lightbg {
text-align: left;
max-width: 700px;
margin: 50px auto 32px;
padding: 30px;
border-left: 1px solid;
}
.lightbg {
margin-top: 32px;
color: #111;
background: whiteSmoke;
border-style: dashed;
}
h1 {
margin-bottom: 24px;
font-size: 24px;
font-weight: 200;
line-height: 30px;
}
p {
margin: 16px 0;
}
hr {
color: #777;
}
a {
color: whiteSmoke;
}karenanya hasil dari kode di atas ialah seperti ini.
demikianlah panduan Desain Flat Button HTML CSS, semoga bermanfaat..
Sumber https://kursuswebsite.org
