So we worked on all these inputs,
let's work on the button
now. Now the button actually is something we styled before because that's clearly not the default browser
style.
We have a button style in our shared.css file, there
if you scroll down, you find the button styles at the bottom of the file,
here is how we style the button.
In the end, one important thing you learned there already is that font inherit thing because the button,
just like the other form elements, has some browser defaults which actually overwrite your default fonts set
up for your entire page,
font inherit makes sure you're inheriting again.
You also saw there that you can basically style all the things you always style:
background, border, text color, paddings, stuff like that.
You also saw the pseudo classes; hover and active, as well as focus and the outline we used there.
Now one thing I want to show here too is how you can style the disabled state of the button.
In a real web project, it's not that uncommon for the button to be disabled, until the form as a whole
is treated as valid.
Now important note; to switch this button from disabled to enabled,
so to remove that disabled attribute, you need Javascript again because that is something that needs
to change during runtime,
this is only possible with Javascript.
So here, we'll again hardcode it in there so that we can see these different styles.
Let's go back to the shared.css file and for that button, I'll use the button class selector and add
the disabled attribute selector.
Now this syntax here simply means target any element with the button class that also has a disabled attribute.
If I would put a blank in between, this would target all elements with disabled that are nested inside
of a button,
of course we have none of such here in our web app.
So with that, we can set up a disabled style
and typically, you want to give the user some idea about that this button is not clickable,
for example you could set the cursor to not allowed,
this automatically changes the mouse cursor and gives a clear feedback that this is not clickable.
You could also set the border to some grey color, maybe a little bit darker than that though, this maybe,
give it a background of grey then and also a text color of maybe this dark grey
again. With this style, if we save that and note that our button has the disabled attribute now,
if I reload, this clearly does not look clickable,
we got no hover effect and you also note that my mouse cursor here changed. By the way, we got no hover
effect only because all the styles we change in hover are overwritten by our disabled style here.
So if you got more styles here set up for hovering, you might want to overwrite them here,
just as a side note. If we remove the disabled attribute in our HTML code, we'll go back from that
disabled style to the old enabled style
and again, this transition is typically something you would do with the help of Javascript.
That's it for this module,
this is our form style
and this hopefully gave you some ideas about how you can approach the styling of inputs, of forms as
a whole, structure them in the way you want.
We'll revisit this later when we learn about CSS grid
but for now, this is where we'll finish.