Styling the perfect radio button for CMS Filter in Webflow

hello and welcome back to this part two of the CMS filer video so in this video I'll Focus specifically on the styling of these radio buttons and uh if you are looking for the technical setup that's the other video okay in our webflow project we have the form block which is supposed to wrap all of the our filter elements and right now there's nothing but we can add a radio button here from the quick menu and when we do that we get these three elements we get the radio button field and we get the radio button that's the dot usually I don't use that in um this kind of um filter button so I'm going to just put a height class on that one and then we have the radio button label and that's the one for now I'm just going to call it all yeah that's usually the one that dictates what filter is active so um that's also the one that would have the finu attribute what we want to focus on in this video is the styling so that's what we do on the radio button field element and I'm going to make a class I'm going to call it radio filter let's first of all change the default padding I'm going to put one ram hft option shift enter to put it on all four sides but the vertical padding I want to be a bit less so I'm going to hold option and click 0.25 and then we have a nice padding around that and I'm going to just set the margin buttom to zero so we don't have extra margin in the bottom and I want to add border on the sides I'm going to just put one pixel and use white for that and also put a radius here I'm just going to put one Rim I think I prefer the border to be a bit less so I'm going to put 20 opacity so it's faded like that I'm just going to make a few more now we have um a decent default state but I want to um make the text into the accent color so right now it's just orange and let's actually jump into the variable setup in this project here I have a very simple variable setup and the background color and the text color and then the accent color for this video specifically the accent color is the most important one and that's the one we want to change from the CMS so each of the filters that are dynamically loaded will have their unique color which is defined in the CMS collection here now we have the default State let's add the hover state so we go over here and add a hover State and for the hover State I want to turn the Border color to the accent color so it takes that color I also want to change the background color of the the buttons so and I want it to be the accent color but of course then we can't see the text it would be nice to have the accent color but with 15 or 20% opacity and we can do that with something called color mix and that's something we can add with the custom attributes so we want to define the background color and I want it to be color mix and I want it to be in is RGB and the first color I want to mix is the accent color that's a variable and the second color I want to mix is transparent and I want to put 85% transparent okay so here we see that we get the accent color but it's not fully opaque which is very cool color mix is a relatively new CSS attribute so it has 88% coverage right now which is okay but some people may not see it at least we're also changing the Border color so they will still get some kind of feedback okay that was the hover State and let's also just put Transitions and I'm just going to use all because I'm a bit lazy right now and say 400 milliseconds so now we want to make the active State we have fin Suite CMS filtering active state is a combo class that's added to this element so uh let's add a combo class and it should be called fs- CMS filter undor active so that's uh the name you can find it in the finu documentation then we can style this to Define how it should look when it is active one thing I want to do here is now I actually want to put just the full accent color as the background and then the text color I'm going to make that white and also going to put just a little bit of uh text uh Shadow so you can see the text and the Border I also want to up that just a little bit from 20 to 40% okay so we have a bit more border and now let's uh add some of that depth feeling and we're going to do that by stacking multiple box Shadows on top of each other first I want to add the inside box Shadow this one I want to use white and I want it to be 10 pixels blurred three pixels down and then -3 pixels in size so it's a bit more soft then this second box Shadow I want that to be at a similar level of blur I wanted to use the accent color and I also want it a bit down three pixels down and I also want it to be a bit smaller so negative 3 pixels in the size and then the last box Shadow we put is also the accent color this one I want to be even more blurred so I just go for something like 30 also move it down and make it smaller okay so those fre Shadows stacked on top of you tell looks like this which is a very very nice look for what we're going for let me just uh actually delete these two we want some more filter buttons that are generated from the CMS so let's add a collection list for that in here and that's the FES collection like that and I'm going to copy the radio filter that we already made and paste it inside of here I'm just going to put a class on this one so they wrap in a better way okay so now we have these extra buttons I'm just just going to remove the active filter so it looks a bit more like how it will look when we load the page also connect the label to the actual value from the CMS so we can see that they are indeed different these filterers what I want to do now is to change these so they have the unique color because otherwise we are actually almost at the end so inside of the collection item I want to add an embed and in this embit I want to put a style tag and in this style tag I want to write some uh CSS so we want it to be attribute based so let's use the square brackets we can call this data color when the value of the data color attribute equals the name of the theme that would be space or air Earth or water then I want to redefine the value of the accent color variable the way we do that is we write the name of the variable and then we can Define here what the value of that should be so I wanted to take the color value from the CMS and then we can actually save this and nothing happened yet because we haven't applied the attribute to the items yet so we can do that down here at a custom attribute data color and we want the value to be the name and then it changes dynamically this is quite cool because we can of course change the text color with this um options out here but when we do it in this way by redefining the um the actual variable it just gives us some more flexibility in using it for instance with the color mix okay now let's publish and uh preview how it looks so as you can see here we have the fills and they are working beautifully and changing between the different states with hover and the active State I hope you enjoyed it if you want to know more about this project for instance how we styled these uh cards then let me know in the comments and we'll make this a freeart tutorial about everything in this clonable as always you can find the links in the description and um thanks for watching and see you in the next one

Channel: thelazygod

Views: 1,149

Keywords: Webflow, cms, cms filter, finsweet, filtering, radio button

Id: mzHG5JwqB2M

Length: 8min 5sec (485 seconds)

Published: Mon Apr 15 2024