Let's now work on this button.
So for the button, let's add here a design.
So I'm going to add the design of the button right here.
Here I'm going to say button because they want the design to be the same for all buttons that I have.
But I'm going to change later on.
I might change some designs of some colors by basically most color.
Most buttons will have the same exact I'm using.
Therefore I'm going to say here font size and then point eight already am for the font size of the money
for the font weight, I'm going to increase the font weight.
So the font width is going to be 900.
For the outline, I'm going to remove the outline.
So the outline is going to be on the border as well.
I'm going to remove all borders.
I'm going to say border none.
We don't need any border.
I'm going to also change the background color.
So for the background color back around color for the background color, I'm going to use this color,
which is a degree of the black color.
Next, I'm going to add I'm going to change the color of the text itself.
So for the text, I'm going to use the.
Ali's blue color.
I'm going to add batting and and I'm going to change the text to two uppercase.
So for the batting I'm going to add adding top and bottom 13 when I was right and left 30 and right
next transform is going to be uppercase so that all letters will be displayed in uppercase.
The cursor cursor is going to be pointer.
And finally, the transition.
So this transition again, the transition is the amount of time you need in order for the for the parent
to be completely displayed on the screen.
So it takes, let's say, 5 seconds, point 5 seconds is, which means that it's going to happen within
half of a second.
Let me show you that now.
What's going to happen if I refresh?
As you can see, this is the button and this is how it's going to look like.
So the transition happens super fast.
You will not you will probably not notice this because it's it happens super fast.
So this is going to be the reason for your button.
However, I'm going to add a hover effect to the button.
So I'm going to say here button and then I'm going to say hover.
So if I hover over a button, I want to change its color.
So if I hover over, they don't I want the color to go orange.
I'm going to say coral or orange.
I'm going to say coral.
Now, if I refresh.
As you can see, the color will be orange or you can change the background color itself.
So instead of changing the color, I'm going to name background color.
Now the background color is going to be, as you can see, it's going to be orange.
I think this is better.
I think this looks better.
The next thing that I'm going to be working on is the year.
Remember, I added the font.
I just one wanted to show you that this font depends up on your design.
If you want to use less pop ins like me, you can do this.
But if you don't, you can remove this.
And if you remove this, the design is going to be different.
As you can see, the the texts are going to be different.
But I prefer to use this.
I like this Poppins.
It looks it gives the the design of the text a better look.
I think it looks better.
So the again, the.
The font that you are using can be different.
It doesn't have to be this one.
There are so many fonts given by Google.
You can use one of them or you can use some one.
From the built in.
For families, for example, here we have an impact.
Let me show you what the impact is going to look like.
So the impact would like wouldn't look like this.
So you can choose your font family.
If you if you don't want to use the pop N's like me, you can change that and use another one.