CSS Tutorial for Beginners - 44 - A nice button Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this CSS video we're going to design
a button and I've had a lot of requests
from subscribers to do a really cool
looking button that they can use for
their website so this code will be very
very reusable in fact button code in
terms of CSS is some of the most
reusable code now we're not going to
create a menu like we did in the last
video these are strictly just going to
be buttons so that's why there's no div
element tag here we're strictly going to
be creating buttons in this video and so
we're going to use the standard UL
element tag and the li element tag
followed by a anchor tag so I'm going to
go ahead and copy and paste the first
set of code and we're going to discuss
it so here's our button class that I've
created right here and actually let's
hit refresh over here so I can go over
each one of these so the background
color is going to be this gray right
here we're going to set the border at
one pixel solid we're going to have a
border radius of three pixels now this
first value here is how bold we want the
font to be and for my buttons I always
like to set those at 700 so that's how
bold I want my text to look inside my
button we're going to set the button to
13 pixels and Helvetica is going to be
the first font that we want to load if
we can't load that then we'll load the
Arial font we're going to set the height
of our button to 30 pixels and we're
going to set the line height to 28 pixel
now you remember that line height
Centers our text in the middle of our
button and the way you do that is you
want that very close to the value that
you set in the height and usually I like
to set it a couple pixels under what I
set for the height so 28 pixels is a
good number
now we haven't done this before but
we're actually using two parameters here
for the padding and if you have two
settings in here like we do right here
this first value stands for the top and
bottom so we're setting that to zero
pixels and this 20 pixels stands for the
right and left side so we have 20 pixels
on the right and 20 pixels on the left
we are going to align our text in the
center and we're only going to set a
margin on the right which is 10 pixels
and that's because I don't want margin
all the way around my buttons in fact
all this does is really create 10 pixels
of space between our buttons and since I
don't want 20 pixels different
I'm just going to set ten pixels on the
right we could actually make this left
doesn't matter now this property right
here box sizing gives a really nice
effect to our buttons it kind of gives
it a box effect now there's a lot more
to this property that I'm explained and
I'll do a future video on that but for
now we're just going to make this our
last property in our button code alright
so let me copy and paste some more code
in here and I'll explain it so now what
we want to do is work against the UL and
we've done this in several other videos
we want to set the padding to zero and
we want to get rid of the bullets and we
also want to display the buttons
side-by-side now since we didn't really
create a menu in this video these are
just buttons you could keep these
vertically it doesn't matter you can use
these buttons in any way you want but in
this video we're going to have them
side-by-side okay so let's go ahead and
hit refresh and now you can see they're
side by side by side they have ten
pixels of margin between them and the
bullets are now gone so this is looking
pretty good
but we need to add some more code down
now so now what we want to do is work
against the anchor tag so we've created
our base button code we've put some code
against the UL we've put some code
against the li now what we want to do is
work against the anchor tag and that of
course is everything that's displayed in
the hand everything that the hand can
click on so let's go ahead and copy and
paste this in here and let's go ahead
and hit refresh and then I'll explain
the code so we've created this dark grey
for the color of the text now and of
course as we've done many times we
remove the underlining with the text -
decoration property we set that to none
now we floated this left and that
actually increases the size of our
button I'm going to explain this in a
future tutorial this concept but for now
just know that by putting the float here
we've actually increased the size of the
button again I'll explain this in a
future video but of course we're not
done yet we need to create a hover
effect and that's probably the most
important effect in terms of buttons so
I'll copy and paste this in here and
let's save this up let's hit refresh and
look how great this looks we have a nice
gradient effect
notice how the background color changes
to a little bit darker gray now from
this initial gray that we use and that
gives us that nice gradient look at that
so that the user knows when their cursor
is over that particular button
I think that looks really really good
and you'll notice now that we make the
color of the text of much stronger black
see how that stands out so it really
stands out we're changing the color of
the text and we're adding a gradient
feel to the button so there you go
we'll design other buttons but this is
one of my favorite buttons and it's very
very reusable because gray really
matches just about any color that you
have on your website so this is a really
really good color to use okay that's
going to do it for this video see you
guys in the next video