Button Property in CSS

Hello guys. Welcome to our series, CSS. In our last segment, we had seen about CSS cursors. We had generated one program in which we had checked all the available cursors and the arrow designs that are there for the cursor, all most all we had checked one by one and we had also seen that as per the requirement, whenever a web page is being designed, based on the requirement which cursor is to be shown and when to show that we identify. So, I hope you have performed the practical yourself about the cursor session.  Okay, guys! So, lets go ahead in our today's segment, our today's session is about CSS buttons means the HTML buttons that we have, how we can design those buttons through CSS, how we can give a proper look and feel, so that when we place them in any web page, how it can look eye catching, that is what we are going to see today that how we should design the buttons.okay! So, first of all we'll see about the CSS button. In HTML we use the button tag to create a button means whenever we have to create a button at that time we use a button tag in HTML. So, not just the button tag, we can also use the input like we had seen in HTML form input types that input type equal to, submit if we write, we get the button itself. Writing input type equal to reset also gives us a button. These are such types of buttons which have fixed properties. With submit the forms form gets submitted. With reset the form gets reset. But if we want the button for any other task other than reset and submit, how can we show it in the web page, so that happens with the help of our tag button. So, html’s button tag is useful to show us the button. Okay, guys! got it? We will go ahead, but by using CSS properties we can style the buttons which means the HTML button that we have, we can use CSS property and style the buttons. Buttons help us to create user interaction and Event Processing means what is the use of the button? With buttons the user's interaction increases and the Event Processing also increases because it so happens that when we look at the button, sometimes its colour or its design, looking at that we come to know that what would this button be for or for which event or which operation this button can be used or what is its work in our webpage. So these are few default interactions. Means looking at the button and identifying the use of the button, for that we use CSS properties. So we will start our segment, the first thing in the button is the background colour. So whichever the properties are there of the button we'll see them all with the practical. First of all, we will open one Sublime Text. In one Sublime Text after setting HTML, example, buttons, we will save it, button.html, now we will run this program. So, this is our program, okay. Now, in this we will place one button. So let's say we give a button; button and we name the button let's say; click me, save, reload as soon as I added HTML button I'm getting a button of this design,  let's say we centre align the button, for that we will take one div and we will name the div, let’s say we will take a class in it. We will take a class, centre, nothing will happen with a centre but when we will give centre align property, then it will be activated. got it?  So, our class is dot, class name, text align centre what happens with text align not just the text comes in between but all our content comes in between. So, first of all we have generated a button called click me. Now, we will go to the slide. Our first property is background colour. What is the use of background colour, this property is used for setting the background colour of the button, means to change the background colour we use the background property. So, lets say, in the centre, there is the button. I will give it ID, ID button one. And to this button, we will give a background colour, red. As soon as we give the background colour here our button is visible in red colour. Now, there is one property of a button when we click on it, we see the feel of clicking.  Like you can see that when I'm clicking on it, there are few shadows that are getting generated through which it is identified that our button is currently getting clicked. So I have given the red colour to our button. So it's looking red. Let's say, now if I generate some more buttons. Let's say I name each button 2 or 3 and let's say, we change its name from click me to red, cyan and light green, if we give these names and we generate three IDs and here it will be our if it's red then red and if it's cyan, then C Y A N, cyan and if it is light green in that case we will give light green. So, in total we are getting three buttons: red, cyan and green. Means you can give the colour you would like to give; in that colour you will get the button. got it?  So, let's say this portion of ours was for the background colour, we will put a heading on it. H3, buttons with different background colours. Okay. So, buttons with different background colours are getting background colours here. Now, we will come on to our slide, the first property that we have seen is of background colour the next property is of border, border means which type of borders we can give to our button, so here it is used to set the border of the button it is the shorthand property for border width, border colour and border style. Like we had even seen in our border section when we had learned CSS border that we can give in total three things in a border property, width, colour and style. We can give them all together and if we want to give it differently we can give it by giving the border width, 2^nd by giving border colour and 3^rd by giving border style.

Now let's see the  example, after the button. We are seeing three, four styles. Like none, Then it's five px brown solid, five px red dash, so all the different button properties which are there we will try those. So, let's say I take my button, the caption we will take as buttons with different borders. Similarly, we will generate one more button, button. So, this time we'll take it with an ID. Let’s say here we give ID 4. Total five buttons we will be needing here.  Here it will be 4, 5, 6, 7 and 8. So, in total we have generated buttons with five IDs. let's say, now we will name the buttons, no border, in that case in our button, it will come hashtag border, border, none. We will save it. Okay. So, here we have taken the first button of no border, temporarily we will comment it. So, my first button was without borders, I have a button but it is without any borders, so when I click on it, my button gets active, it is focused, that's why we get a black border here. But currently you can see that in this button there is no border. Right?  So, this is our button without a border. Now, let's say if I activate button five and in it, I write brown border, in that case, hashtag button 5, border 5 px, solid brown, save. So, here I'm getting another button where there is a 5 pixel border of the button.  We have not given any background colour for it so I'm getting this default grey colour and we are getting brown colour on the border, since we have given solid, we are getting it in dark solid colour. Next let's say our button border is 6, if we give it a dashed border, it will come as a red dashed border. Okay,guys! We had seen these border properties when we had seen the border. Now, we are again applying buttons and seeing. Now let’s say I take ;3px, red, dashed red.  Here it will be small, save. So, here I am getting one button. In which, we are getting a dashed border.  By clicking on it, it is getting focussed. So, this is our dashed border, then comes the borders, in which we've got dotted borders. So, let's say, I write here black dotted border, 3 pixels dotted and black. So, you can see here that our border is dotted instead of dashed. Our last example of the border is the double border. Let's say we take the colour in it as blue, double, border, you can give any pixel size that you want, I will for example, give 3 pixels, double blue.okay! Here I am getting one more button, where I am getting a double border. And this is my button with a background. So, this is how the button is generated by giving different borders. Now, we will go into the slide, after the border comes the border radius. When we generate any button, we give it a radius, because of which we get rounded corners for the button instead of sharp ones. And our buttons with radius they even look good. Now let's see if we will generate those. So here, it will be a button with border radius, button ID, button radius, I will give the name, button with radius. In this we will give some radius like, hashtag border radius. With a border radius, we can give as many curves as we want. Let's say we give it 20 pixels. For example, I will generate here, so here button with a border radius, as soon as I give it 20 pixels. I'm getting a circular like button here, like you can see here, the round corners come off and the button is like a circle, instead of 20 pixels I want to generate something else, even that we can generate. Let's say we generate three buttons. border radius one, two and three. Even here, one. So, now in these three we will place a different radius. Like I keep here two and three. If I give 5 pixels and  here… we can give value in percentage as well. So let's say I give a percentage here, 5%. Then we will save it and run it. So, in total we are getting three buttons. Button with radius, button with radius and button with radius. But by giving 20 pixels we're getting a smooth curve and I have given five pixels we are getting little curves here. But rectangle shapes, not with corners, we are getting a slight curve here. But when I'm giving it in percentage, we are getting this type here. I will zoom into it more. Here the button that I'm getting here, so usually like we had seen in border radius as well, while giving in percentage the result that we get is not more attractive but still, percentage also we use based on the requirement of the web page as to how it looks. Here, when we are working with the button here better than the percentage, we are getting it in value. So, I will remove this and make it 10 px. Okay. So, this is my slight circle, this is my more circular one. Both 20 and 10 we are getting almost the same because how much ever is the padding of the button that means the height of the button, based on that in 10px we get this much of a curve. Over and above 10, how much ever pixel value I will increase. I will always get the same curve. Which means more than this curve is not possible for us. Let's say I make 300 here, for example, and I'm reloading, still am getting the same output. It means after the maximum curve happens, after that the values will not be able to increase. So, in 5 px we are getting this much, if I make it 7. So, this is 5, this is 7 and this is max 10. okay! Let’s say we make it here, 5, 7 and here 10. Okay. So, this is 5 pixels, this is a little more 7 and on 10 we are almost getting circular. So, this is border radius property, we can make little more attractive buttons with the help of border radius by giving a proper radius to the border. Got it, guys?  Next, let's move ahead, after the border radius comes box shadow. box shadow is a very important property, with box shadow, we can give an attractive look and feel to the button. We can give our button a 3D look with the help of shadow. So, in box shadows, we are getting these many properties. The first number is.. the first value which defines horizontal offset, meaning horizontally how much shadow we require. The second one is vertical offset which means how much shadow we require vertically. Then comes blur radius, which means how much we want to blur the shadow. Then comes optional spread, which means not blur but how much we want to spread it and at the end comes colour, which means which colour shadow we require. When we will perform this thing practically, it will be clearer. So, let’s say, we will generate our last button with box shadow, save. Now, I will generate one button here, a button in which we will give an id, button with box shadow. Here I will take one. Okay. And we will name it, Button with box shadow. Okay. So, we have not added the shadow property, the button is looking this way and now we will add the shadow property. So, for the shadow property we will require a box, shadow. In box shadow, like we saw 1^st, first comes horizontal offset. Let’s say I will take for example, 10 px, 2^nd comes our vertical offset. So, I am temporarily taking 0px (Zero px). Then comes our blur radius, even though I will make it as 0.(zero) Then comes our spread, I will make even that 0(zero). And we even want the colour, so for example I take black colour. We will save it and run it. Because we have given a horizontal offset that is the reason, we are getting the shadow in black colour. Now, in this place…since we have selected horizontal, it is giving us the shadow horizontally. okay!  Now, in this place if I give vertically, then we will get the shadow below. So, let's say I make it 0 (zero) here and I make 10 here and I reload here. Now, where are we getting the shadow, we are getting it below the button. It is now very clearly visible here, so let’s say, I apply br property. Okay. So, here we are getting the shadow even below. So, horizontally means we will be getting the shadow in horizontal direction, then our vertical offset, when we will get the shadow in vertical direction. So, we will apply these 2 together. So, let’s say, while applying it together, I will keep it as 10; 10, save. When I have applied both the shadows together at that time, I am getting the shadow in horizontal direction, vertical direction and since the shadow is not exactly behind the element but it is at a distance, that is the reason we are getting the shadow in cross. Let’s say, I make these two, 5, means we will get it in another direction, a little behind, like the 3D view should be generated, we get it generated in that type. Okay,guys! Now, our 3^rd was a blur radius. So, currently we can see that our shadow is a very dark black colour. So, let’s say we want to generate blur here, we can even generate blur here. So, let's say if I generate 10 pixels blur. After giving 10 pixels we will be getting some of this type of blur. If I want to make it a little less blur, I will give 5 pixels here. So, we will get a little less blur. Blur means how dark will be our shadow. How much ever value we will increase, that much light will be our shadow. So, when I have given 5 pixels, I am getting this type of shadow. When I make it 10, the show generated will be lighter. With the shadow property we will get the button in a little 3d view. Our 2^nd last is this. Fourth one is our optional spread radius. Means how much we want to spread. Let’s say, I write 10 here. Spread means how much it is spreading in all the directions. When I have generated spread, you can see that in every direction, a little bit of shadow is getting generated. I will give it 5 pixels here. We are getting it a little dark here. Now, we will keep it as 10 and we will reduce the spread a little. Okay, so we have spread it a little so we are getting it in this type. So, this is our spread, so combining these 4 things, horizontal offset, vertical offset, blur amount and spread offset, we can generate shadow as we like. Last is our shadow colour, which colour shadow do we require. Normally in the place of black, grey shadows are more preferred. So, let’s say that the # code of grey is adadad. So, I will insert this, now that putting, adadad, we have generated grey colour, we are getting this type of shadow. You can show up the shadow the way you want to. Currently, I want it with 5 pixels spread and I want it without blur. So, you can see that without blur I am getting a square shape shadow. Now I will increase the blur and see it without spread, how it will look. So, here, somewhat this type of shadow is getting generated. You apply different values and check which shadow is looking proper. With what our button is getting proper look and feel. With that you can generate any button of your choice. right?  Now, our next property after shadow comes the padding, which means in the button, you can even give the padding so that our content gets padded inside. So, let’s say for the padding, we will generate one button here. Button with padding, id, button padding, button with padding. Okay. Now, we will give this id a little bit of padding from here. Let’s say, I give it here, 10 pixels. So, let’s say my button is generated here. Button with padding. But since we have taken 10 pixels, we are getting the button in a big size. So, how much ever padding we will give, our content will be padded inside. Padding and margin we will learn, when we will teach padding and margin but we will currently see, what happens with the padding, with padding our content gets pushed inside the elements. So, here when I am giving 10 px, so from my horizontal border inside by 10, from left, right and from bottom, 10. That much content is pushed in from inside. So, this is the concept of padding. So, this was our padding, we give the padding value in pixels only. So, we have applied here padding as well. So, in total, we have seen background colour, border, border radius, box shadow and padding. We have seen almost everything. These many are the button properties, with the help of which we can generate proper buttons. okay So, now let’s say if we generate a button, in which we will add all these properties. So, we will write here; button with button properties, button, let's say we will name it; submit. we will give the id as button property, save. To this button; property id. our 1^st was background colour. So, I will give here, background colour, light green. Then was our border. So, let's say if I don’t want the border, I cannot keep it and if I want that there should be a thin border of 1 pixel. So, one pixel solid, I am not passing the colour. okay! Then comes my border radius, I will keep the border radius of 5 pixels. Then comes our box shadow. The box shadow that we have applied above, we will apply the same box shadow there. And then was our padding, let's say we will generate 5 pixels padding. So, we have placed all the properties together, now we will reload it. So, here we are getting one button with shadow, colour, padding is also there and in that we are also getting the border. So let’s say, combining all the properties we are getting this kind of button. Let's say, if we reduce the border radius, we will make it 1 pixel, we will change the colour. Let's say we use grey colour itself. Background colour. Okay. And we will increase the padding of 10 pixels. So, we are getting somewhat this type of button, which is in a strong, solid colour.okay! So, let's say we will change the colour and take another one, let's say like a yellow. If we take yellow, we are getting a yellow colour button and we are even getting a slight shadow here. In this way, the kind of button that is useful for you or the way you want to keep in your web page. You can generate that kind of button combining all these properties, the kind of shadow or colour you want to give. The way you want to keep the font inside it. You can generate the button of your choice. So guys clear!, this was our today’s session, in which we learned about the buttons. So, guys, all the properties of buttons that we have seen today. I request you add all these properties one by one and add it in one button as well. Like we have seen in today’s segment, in the same way you practice it at home. If your practical is successful then it is really good and good. If there is a question, doubt or query in the segment. You can ask us on forums.learnvern.com. We will try to resolve your issues at the earliest and revert to you. Our next segment is on CSS images. Thank you.