Halo teman teman dumenity, kembali lagi di tutorial tutorial website dumet school, ngomong ngomong tentang desain, Desain menarik sangat berpengaruh pada tampilan web kita, agar pengunjung bisa betah berlama lama di web kita. pada pembahasan kali ini kita akan belajar tentang cara membuat Desain Flat Button dengan HTML & CSS.
buat 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">Dumet School</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 buat 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;
}
maka hasil dari kode di atas adalah seperti ini.
sekian tutorial Desain Flat Button HTML & CSS, semoga bermanfaat..
The post Desain Flat Button dengan HTML & CSS appeared first on Kursus Website Terbaik.