All right.
We're pretty much done with the project.
We just want to set up the CSS for page button container.
So let's navigate to assets wrappers.
And we're looking for page button container.
We want to remove all of this code and we'll set it together from the scratch.
So let me remove everything.
And we want to start by setting up some kind of height.
My case, I'm going to go with six rims.
Then let's go with margin top.
And in my case, it's going to be equal to two rims.
Then let's go with display flex.
So in this case, I'm talking about the entire container and I want to align everything in the center
so vertically.
Then also, as far as the.
Content horizontally.
I actually want to place it all the way on the left hand side or I'm sorry, right hand side.
So I'm going to go with justify content and I'll set it equal to.
And then as far as the flex wrap, I'm going to go with wrap.
So if there is not enough space, then we'll set up a new line and we can nicely use Gap.
In my case, I'm going to go with one Rmse.
So essentially this is going to be gap between the items.
Then let's style the button container.
So this is where we have most of our buttons.
Well, I guess that depends on search query, but in general.
Yeah.
Then let's go with background.
We want to set it equal to var, then hyphen hyphen, then let's set up background hyphen.
Secondary.
Hyphen color.
Let's go here with semicolon.
We also have border radius.
And we'll set it equal to a CSS variable.
So hyphen hyphen border.
Radius.
Let's save it.
And then we want to go with Display Flex.
So I'm setting up display flex for the entire wrapper, but also for button container.
I'm going to go with display flex.
And then let's style the page button and I guess then we'll worry about the next preview.
So as far as the page button, we want to add background transparent.
We also want to go with border color and same deal.
We want to go with Transparent.
After that, we want to set up some kind of width.
In my case, it's going to be 50 pixels height.
I'm going to go with 40.
Pixels then font weight.
We're going to go with 700.
And let's also increase the font size.
So in this case, it's going to be.
1.25 Rems.
Then when it comes to color, I'll actually go with the primary one.
So var hyphen hyphen primary.
And I'm looking for 500.
Then let's set up some kind of border radius.
You know what?
It's going to be exactly the same.
So let me copy and paste.
And I also want to add the cursor.
And I want to set it equal to a pointer.
Then let's scroll down.
So you can see it better, or at least I will do that.
And then let's style the active one.
So when it comes to the active one, I want the background to be the primary.
Let me just use this value over here.
And when it comes to a color, I'm going to go with the white one.
So instead of this one here, let's go with var and hyphen, hyphen and white.
Okay, beautiful.
And then let's style the next and prev and also at the very end we're going to go with the dots.
So in here we want to go with the.
Class of prev btn, then next btn.
And for both of them.
We will copy some of these values over here.
So let me take all of this and then we'll just change some things around.
So copy and paste background, we're actually going to go with the variable, so this will be equal
to var hyphen hyphen background and I'm going to go with secondary color.
Secondary color.
Then Porter is going to be transparent, so that stays the same.
We'll also add here border radius.
Okay, that's good.
Then let's set up the width.
Or in this case, we're going to go with 100 and height is still going to stay the same, so we're going
to still go with the 40 pixels.
Then we have a color.
And again, we'll copy this one because this will be exactly the same.
And we have text transform letter spacing.
And since we have in there the icon as well, again, I want to place everything in the center.
So let's go here with text transform and we want to set it equal to capitalize.
Then we want to go with letter spacing.
And we will set that one equal to.
Our variable letter spacing.
Then let's go with display Flex.
We want to align everything in the center.
So align items center, then justify content.
Same deal.
Let's place everything in the center.
Let's add some gap here because we have icon and a text, remember?
So this will be equal to 0.5 Rems and then cursor will be equal to a pointer.
Then let's set up hover effect.
So let me copy these ones.
Copy and paste.
And here we're looking for one hover and then the second hover.
Now, as far as the values, we're going to go with background color and the transition.
So let me see where I have both of them.
So I don't have to waste too much time.
So background is equal to actually this one.
So primary 500 color is going to be equal to white.
And then we want to go with transition and we'll set it equal to var and then hyphen hyphen.
Transition.
And lastly, let's style those dots.
So we're going to go over here with our class.
Then let's go with display grid.
After that, let's place everything in the center.
So we're going to go with place items equals to a center.
And then as far as the cursor, I don't want it to be pointer, so I'm just going to go with text.
Let's save it.
Let's navigate back to our project, let's refresh and if everything is correct, this is how our page
BTN container is going to look like.