Filter Buttons With Count

Developer
Ken Lane
Size
3,183 Kb
Views
14,168
  1. Filter Buttons With Count Previews
  2. Filter Buttons With Count HTML Codes
  3. Filter Buttons With Count CSS Codes
  4. Filter Buttons With Count JS Codes

How do I make an filter buttons with count?

What is a filter buttons with count? How do you make a filter buttons with count? This script and codes were developed by Ken Lane on 25 October 2022, Tuesday.

Filter Buttons With Count Previews
IQ Test

Filter Buttons With Count - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Filter Buttons With Count</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class='header'> <div class='filter-by'> <span> <div class='label'> Filter by: </div> </span> <div class='filter'> <span class='msg'> <div class='tiny'>Pinned</div> <div class='tiny'>By You</div> </span> <span class='count'>5</span> </div> <div class='filter active-filter'> <span class='msg'> <div class='tiny'>Tanjo Bot</div> <div class='tiny'>Recommends</div> </span> <span class='count'>33</span> </div> <div class='filter'> <span class='msg'> <div class='tiny'>Pinned By</div> <div class='tiny'>Collaborators</div> </span> <span class='count'>7</span> </div> <div class='filter'> <span class='msg'> <div class='tiny'>No</div> <div class='tiny'>Filter</div> </span> <span class='count'>45</span> </div> </div> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Filter Buttons With Count - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700|Arvo:400,700);
.body { font-family: "Source Sans Pro", sans-serif;
}
.header { background: #56688b; height: 90px; padding: 30px 30px 0;
}
.filter-by { font-family: "Source Sans Pro", sans-serif; color: #fff; border-top: solid 1px #aaa0; border-left: solid 1px #aaa0; padding-left: 10px;
}
.filter-by .label { display: inline-block; vertical-align: middle; margin-bottom: 5px; height: 30px;
}
.filter-by .filter { border: 1px solid white; margin: 0 10px 5px; color: #fff; background: #56688b; padding: 0px 10px 0 10px; display: inline-block;
}
.filter-by .filter:hover { background: white; color: black; border: 1px solid black; cursor: pointer;
}
.filter-by .filter:hover span { text-decoration: underline;
}
.filter-by .filter span { display: inline-block;
}
.filter-by .filter .tiny { text-align: right; width: 69px; font-size: 12px; height: 12px;
}
.filter-by .filter .count { font-size: +20px; position: relative; top: -4px; padding-left: 5px; min-width: 23px; text-decoration: none !important;
}
.filter-by .filter .msg { display: ininle-block;
}
.active-filter { background: white !important; color: black !important;
}

Filter Buttons With Count - Script Codes JS Codes

$(".filter").mousedown( function()
{ $(".filter").removeClass("active"); $(this).addClass("active");
});
$(".filter").mousedown( function()
{ $(".filter").removeClass("active-filter"); $(this).addClass("active-filter");
});
Filter Buttons With Count - Script Codes
Filter Buttons With Count - Script Codes
Home Page Home
Developer Ken Lane
Username kenlane22
Uploaded October 25, 2022
Rating 3
Size 3,183 Kb
Views 14,168
Do you need developer help for Filter Buttons With Count?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ken Lane (kenlane22) Script Codes
Name
Money Buttons
Pin Game
Twinkling Word Cloud
Magnify Linked Page Area
Twinkling Word Cloud React
Tabs and Filters
Links in FirePad
CSS Box Shadow on Left and Right Only For Tab UI
CSS Tab UI with SVG diagonal lines
Pin Game1
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!