Cara Membuat Desain Tags dengan CSS

04/09/2019    Risman Hakim    22     Website

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 :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More