Hello everyone and welcome back.
In today's video we learn how to write styles to buttons we can use a general to assist properties like
one sides color background color etc. to add silence to these buttons let us write some examples to
understand it better.
Let's bring back with Ed let's get you to a pause button say region log in let's copy this Heidi.
Let's say that coming to our index once use a spider let's select this button so hush.
And then let's give about third of this.
So now on policy.
Light blue it's even.
And as you can see now a button has a background color.
Let's try adding some padding see if pixels on 16 pixels.
Let's say that also a button has a border.
So let's remove that.
So border nine let's save it.
Let's make these comments a bit color.
So border radius on let's say eight pixels.
And as you can see our button has a code corner slot.
So even if you don't give a border using the border radius probably just makes the corners rounded.
Also come in here.
So when you click on this button this outline becomes.
So let's try to move on that.
So we have another property for this purpose outline.
So for that live just a nine.
So now when I click on this button that outline doesn't comes also when I hold it.
I want my mouse pointer to change to clickable.
So for that we have another property cursor on it accepts a value point do it.
Let's see it.
And now when I hover on this button it shows me that this estimate element is clickable.
Now let's try adding some woodchips So let's act on button.
So we can log in again to article 1 effects.
We can just golden and hover.
Now let's see when someone who works on this button we change they're going to do dark blue the bar
don't color to dark blue and fun color too white.
So let's try OK.
So about nine colors a dog Blue I'm fine color two white.
Let's save it.
So coming back here
now when I hold on this button the biological animals stood dog new and different color changes too.
All right let's try.
I think some states do the next button as well.
Let's see median.
Sign up let's say with
let's select a button here
let's say you own this button to have a light blue button on a light by down color.
So let's write like
so bargain go right.
And let's give it a water see do make sense solid and light blue let's say that.
And as you can see my button has a light blue button.
Let's give it the same parting as we give the button earlier.
So eight pixels and sixteen pixels that save it.
Also let's make these corners.
Gold are rounded.
So what the radius say eight vixens.
Save it.
All right.
So again when I click here you see this blue outline.
So let's change that.
So outline say none.
And now when I click here that outline doesn't comes back when I hit the button I need my most pointer
to change the clickable.
So let's do that as well.
So cursor on point two.
Let's save it.
And now when I hold my goal settings changes still applicable.
Similarly that's even someone who works.
We fill the color to light blue.
Let's write up harsh Eugene.
Sign up.
So we select our element and we have this property.
So let's just say we want the back on color to change.
So about one color.
Let's say that now when I hold my button salesman light blue background color
let's give it another button let's say disabled.
Let's give it a 90 same button disabled that same old.
So now what we want is we are trying to create a button which is not clickable and it should leave so
that this is not clickable.
So hash I.D. let's give it a background color.
So a light blue let's give it some bindings and eight pixels on 16 pixels that save.
Let's remove the borders so border none.
Let's give a rounded corners so border radius which is say eight pixels now it looks just like the log
button.
So now when I click on it it still gives me this blue line so that you move that as well.
So outline.
None.
Say what.
And when I click on this button nothing happens so let's ensure that this button is disabled and someone
holds it shows that this is not fixable.
So let's do that.
So cursor it accepts another rather not allowed it saved.
And now when I go over it shows me this not alone because of going to also let let's try giving some
transparency to this button.
So it looks a bit faded.
So for that citizens as another block what you call obesity so this be simply accepts a value between
0 and 1.
So you can give it in decimals on so let's say zero point six.
Let's save it.
Now as you can see a button looks up it's needed then someone who works on it it shows us not clickable
goes that window.
That's all for today guys.
If there's something that you did not understand feel free to a comment and we will discuss it.
See you in the next video by Monday.