No video
How to Easily Create Pill Buttons (Tags) with HTML & CSS
Рет қаралды 16,556
Күн бұрынView the SOURCE CODE:
codepen.io/dco...
In today's video we take a look at creating pill buttons (or tags) using HTML and CSS. This design is perfect for search functions, allowing your users to filter by certain things.
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #css
@bushigi5913 2 жыл бұрын
Wow, I was expecting more complicated ways of doing it and the video ends! I am amazed by how easy it was to do these. Thank you for sharing.
@AliBaba-hn8tv 6 ай бұрын
Very nice and easy explanation, thanks.
@user-rb8bv8hw3g 10 ай бұрын
Thank you Brother ,Its Really Help full for me
@constantine9074 Жыл бұрын
I used radiobuttons for background color, this way pill--selected has the same background color on reload
@semasus3830 2 жыл бұрын
2:50 1 em is 16 px btw not 12 px.
@jotape8417 2 жыл бұрын
Hey what is your visual studio theme and how do you make it so that the letters appears smoothly as you write?
@TheBorninmotion 2 жыл бұрын
please do more web components tuts !
@TomasMisura 2 жыл бұрын
i am not sure if you've already done video for that but would you please consider make a tutorial how to create simple tagging system?
@suelingsusu1339 2 жыл бұрын
here is a script that would do what you asked ... just replace the one in the video with this one... add a few more buttons and see what happens... document.querySelectorAll(".pill").forEach((pill) => { pill.addEventListener("click", () => { document.querySelectorAll(".pill--selected").forEach((p) => { p.classList.remove("pill--selected"); }); pill.classList.add("pill--selected"); }); });
@TomasMisura 2 жыл бұрын
@@suelingsusu1339 Thank you dude, much appreciated :),
@Salah-YT 2 жыл бұрын
ok bro nice but it will be more helpful if u do a video about algorithms step by step and teach us how we solve a problem I'm done with HTML and CSS so please if u can thx
@user-md1po2nm9q 2 жыл бұрын
first view
@suelingsusu1339 2 жыл бұрын
@dcode... this is a better script ... it unselects previously selected buttons and selects the clicked one document.querySelectorAll(".pill").forEach((pill) => { pill.addEventListener("click", () => { document.querySelectorAll(".pill--selected").forEach((p) => { p.classList.remove("pill--selected"); }); pill.classList.add("pill--selected"); }); });
Coding Play
Рет қаралды 56 М.