Custom category widget html css
Dhanjee Rider
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.
