Custom category widget html css

category widget

Custom category widget html css

Hello guys today have made this category widget by using HTML and CSS you can use it to show your blogger categories or levels in the top of your website if you want to show this then you can use this  code to show your trending category in home page or anywhere there you want


How to use this category widget

You need to analyse the code you have option to edit the image and title of category grid and you can also add many grid if you want

This you get made on flex box you can add many boxes or you can remove by using category-button class all of category wedges are buttons you can design as per your need 

To use this category widget just change the image and link and paste anywhere where you want to show but my opinion to paste this in layout section by including a HTML JavaScript fidget in the top of your website how are you a main home page add widget

Simply copy this code and paste on HTML JavaScript visit in the top of your website

<a href="">
<div class="category-widget">
  <a href=""> <button class="category-button">
    <img src="image1.jpg" alt="Category 1">
    <span class="category-title">Category 1</span>
   </button> </a>
  <a href=""> <button class="category-button">
    <img src="image2.jpg" alt="Category 2">
    <span class="category-title">Category 2</span>
   </button> </a>
  <a href=""> <button class="category-button">
    <img src="image3.jpg" alt="Category 3">
    <span class="category-title">Category 3</span>
   </button> </a>
  
  <a href=""> <button class="category-button">
    <img src="image1.jpg" alt="Category 1">
    <span class="category-title">Category 4</span>
   </button> </a>
  <a href=""> <button class="category-button">
    <img src="image2.jpg" alt="Category 2">
    <span class="category-title">Category 2</span>
   </button> </a>
  <a href=""> <button class="category-button">
    <img src="image3.jpg" alt="Category 3">
    <span class="category-title">Category 3</span>
   </button> </a>
  
  <a href=""> <button class="category-button">
    <img src="image1.jpg" alt="Category 1">
    <span class="category-title">Category 1</span>
   </button> </a>
  <a href=""> <button class="category-button">
    <img src="image2.jpg" alt="Category 2">
    <span class="category-title">Category 2</span>
   </button> </a>
  <a href=""> <button class="category-button">
    <img src="image3.jpg" alt="Category 3">
    <span class="category-title">Category 3</span>
   </button> </a>
   <a href=""> <button class="category-button">
    <img src="image3.jpg" alt="Category 3">
    <span class="category-title">Category 3</span>
   </button> </a>
</div>
<style>
 body {
     margin: 0;
 }
 .category-widget {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
 flex-wrap: wrap;
}

.category-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50px;
    cursor: pointer;
  transition: all 0.3s ease-in-out;
  background: #ffffff;
  margin:4px;
  background: linear-gradient(10deg, cyan,blue);
  min-width:170px;

box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
transition:.4s;
}

.category-button:hover {
  transform: scale(1.02);
  box-shadow: 0px 4px 2px currentcolor;


}

.category-button img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  margin: 5px;
  border-radius: 50%;
  background-position: center top;
}

.category-button .category-title {
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  padding: 0px 5px;
  font-weight: bolder;
}

.category-widget a{
    text-decoration: none;
}
</style>
  

Now save the widget 

Good job you have installed category grade in your website now you can add the different links on this to access links in all over your website

Last word

In this post we will provided information about Custom category widget html css, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Next Post Previous Post
No Comment
Add Comment
comment url

Paid Templates