हेल्लो दोस्तों, आज हम अपने इस आर्टिकल में लेकर आये है Grid Category Buttons का HTML and CSS Code. इसे हम अपने ब्लॉगर या वेबसाइट के मैं पेज पर Add कर सकते है इसमें हम अपने Category/Level का नाम लिखेंगे तथा उसमे हम अपने Category/Level का url Add करेंगे फिर use हम अपने अनुसार अपने ब्लॉगर या वेबसाइट के मैंन पेज में HTML एवं CSS Code को Paste करेंगे
Grid Category Buttons Demo
नीचे दिए गए Demo में आप देख सकते है
Grid Category Buttons CSS Code
नीचे दिए गए CSS Code के माध्यम से Grid Category Buttons का style change कर सकते है
.featured-post-pro{
position:relative;
display:block;
background:rgb(0 0 0 / .03);
border:1px solid rgb(0 0 0 / .19);
border-radius:5px;padding:10px 15px;
margin:10px auto}
.featured-post-pro .widget .widget-content{
display:flex;
justify-content:space-between;
flex-wrap:wrap
}
.featured-post-pro .widget .widget-title{
position:relative;
display:block;
text-align:center;
border-bottom:2px solid #ffc107;
margin:0;
overflow:hidden
}
.featured-post-pro .widget .widget-title h3{
display:block;
font-size:19px;
font-weight:600;
line-height:37px;
color:#dc3545;
margin:0;
padding:0
}
.featured-post-pro .widget .widget-content .feature-buttons{
width:calc((100% - 60px) / 4);
height:43px;line-height:43px;text-align:center;
overflow:hidden;
position:relative;
display:block;
border-radius:7px;
border:1px solid #fd7e14;
background:#ffc107a1;
margin:10px auto;
box-shadow:0 4px 8px 0 rgb(0 0 0 / .10)
}
.featured-post-pro .widget .widget-content .feature-buttons a{
color:#255ebb;
font-size:16px;
font-weight:700;
text-shadow:1px 2px 4px rgb(0 0 0 / .25);
text-decoration:none;
}
.featured-post-pro .widget .widget-content .feature-buttons:hover{
background:rgb(255 0 0 / .11);
border:1px dashed rgb(165 0 0 / .50)
}
.featured-post-pro .widget .widget-content .feature-buttons a:hover{
color:#ae0000;
text-decoration:none;
}
Grid Category Buttons का background color, border,buttons color, button border, text effect जैसे Customization कर सकते है
Grid Category Buttons HTML Code
नीचे Grid Category Buttons HTML कोड दिए जा रहे है
<div class='widget-content'>
<div class='feature-buttons'><a href='/'>Java Code</a></div>
<div class='feature-buttons'><a href='/'>HTML Code</a></div>
<div class='feature-buttons'><a href='/'>CSS Code</a></div>
<div class='feature-buttons'><a href='/'>Project Script Code</a></div>
<div class='feature-buttons'><a href='/'>Upcoming Projects</a></div>
<div class='feature-buttons'><a href='/'>New Projects</a></div>
<div class='feature-buttons'><a href='/'>Related Post</a></div>
<div class='feature-buttons'><a href='/'>Tools Script Code</a></div>
<div class='feature-buttons'><a href='/'>Bootstrap</a></div>
<div class='feature-buttons'><a href='/'>CSS Colors</a></div>
<div class='feature-buttons'><a href='/'>PHP</a></div>
<div class='feature-buttons'><a href='/'>J QUERY</a></div>
<div class='feature-buttons'><a href='/'>C++</a></div>
</div>
उपरोक्त HTML Code में / के जगह पर अपने Category का url Paste करे तथा अपने Level का नाम लिखे
Grid Category Buttons Source Code
Grid Category Buttons का Source Code दिया जा रहा है यदि आप चाहे तो Source Code के नीचे Copy Code का बटन दिया गया है बटन पर click करके आप उपरोक्त सभी कोड को कॉपी कर सकते है