Cara Membuat Desain Tags dengan CSS

Cara Membuat Desain Tags dengan CSS - Penggunaan tag pada postingan blog, media sosial sangat berguna sekali untuk menemukan kata kunci dalam pencarian, tentu ini akan memudahkan pengguna dalam mencari sesuatu berdasarkan tag yang dipilih. Dengan perkembangan teknologi saat ini berbagai macam desain tags bisa kita temukan, mulai dari yang sederhana sampai dengan tampilan desain yang sangat menarik. Nah, kali ini saya akan bagikan tutorial bagaimana Cara Membuat Desain Tags dengan CSS, simak langkah - langkahnya berikut ini.

Untuk membuat desain tags langkah pertama adalah membuat struktur untuk tagnya, silahkan bisa kalian bisa mengetikan kode HTML seperti berikut.

<body>
    <ul class="tags">
      <li><a href="#" class="tag">HTML</a></li>
      <li><a href="#" class="tag">CSS</a></li>
      <li><a href="#" class="tag">JavaScript</a></li>
    </ul>
</body>

Setelah membuat struktur tag seperti diatas, selanjutnya adalah mendesain tagnya dengan kode CSS, Silahkan kalian bisa mengetikan kode CSS berikut ini.

    @import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');
    body {
      font-family: 'Lexend Deca', sans-serif;
      font-size: 12px;
      margin: 25px;
    }

    .tags li {
      float: left; 
      list-style: none;
    }

    .tag {
      background: #eee;
      border-radius: 3px 0 0 3px;
      color: crimson;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      padding: 0 20px 0 23px;
      position: relative;
      margin: 0 10px 10px 0;
      text-decoration: none;
      -webkit-transition: color 0.2s;
    }
    .tags a {text-decoration: none}

    .tag::before {
      background: #fff;
      border-radius: 10px;
      content: '';
      height: 6px;
      left: 10px;
      position: absolute;
      width: 6px;
      top: 10px;
    }

    .tag::after {
      background: #fff;
      border-bottom: 13px solid transparent;
      border-left: 10px solid #eee;
      border-top: 13px solid transparent;
      content: '';
      position: absolute;
      right: 0;
      top: 0;
    }

    .tag:hover {
      background-color: crimson;
      color: white;
    }

    .tag:hover::after {
       border-left-color: crimson; 
    }

Langkah terakhir simpan filenya, kemudian kalian bisa buka pada browser masing - masing untuk melihat hasil kahirnya. Maka akan terlihat seperti gambar berikut.

Cara Membuat Desain Tags dengan CSS

Baik, saya cukupkan tutorial sederhana tentang Cara Membuat Desain Tags dengan CSS, semoga bermanfaat dan selamat mencoba :)

4 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat