Membuat Action Button Dari Anchor Tag

Masih melanjutkan dari file css dan html modul sebelumnya. Pada modul ini kita akan membuat button dengan menggunakan CSS.

Buka file css lalu copy css berikut. Penambahan ada dibagian .main-nav-item-button a dan .main-nav-item-button a:hover.

*{
    box-sizing: border-box;
}

body{
    font-family: 'Nunito', sans-serif;
    margin: 0px;
}

#product-title{
    background-color: red;
    padding: 15px;
    width: 100%;
    height: 100px;
}

.section-title{
    color: teal;
}

#product-title h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

.main-header{
    width: 100%;
    background-color: green;
    padding: 6px;
}

.main-nav-items{
    list-style: none;
}

.main-nav-item{
    display: inline-block;
    margin: 0 10px;
}

.main-nav-item a{
    text-decoration: none;
    color: whitesmoke;
}

.main-nav-item a:hover{
    font-weight: bold;
}

.main-nav-item-button a{
    color: whitesmoke;
    background-color: red;
    padding: 6px 10px;
    border-radius: 4px;
}

.main-nav-item-button a:hover{
    color: red;
    background-color: whitesmoke;
}

Sementara untuk file html, tambahkan class main-nav-item-button pada link Mulai Berlangganan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SkillPlus - Tutorial Tekno</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <nav class="main-nav">
            <ul class="main-nav-items">
                <li class="main-nav-item"><a href="#">Paket</a></li>
                <li class="main-nav-item"><a href="#">Mentor</a></li>
                <li class="main-nav-item main-nav-item-button"><a href="#">Mulai Berlangganan</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="product-title">
            <h1 id="plans">Tutorial Teknologi Informatika di SkillPlus</h1>
        </section>
        <section>
            <h1 class="section-title">Pilih paket langganan</h1>
        </section>        
    </main>
</body>
</html>

Cukup dengan menambahkan warna background, dan memberikan round border, kita dapat mengubah link menjadi sebuah action button.

Dengan perkembangan teknologi CSS, disertai imajinasi dan kreatifitas, Anda bisa menggunakan property dari CSS untuk membuat sesuatu yang menarik.

Sharing is caring:

Leave a Comment Cancel reply