00:00so today we will see in our course that how we can style buttons in css and how we can add their effects in css
00:12so first of all we take buttons, we have two buttons
00:17we call this button1 and we call this button2
00:31we give these two classes
00:34we call this btn1 and we call this btn2
00:48so first of all we see our output
00:55so here is our output
00:58so first of all we take our btn1
01:10and we delete its default styling
01:17we make its border
01:19we take btn2 and we give its border
01:44so here is our default styling
02:05now we give padding to these two
02:09there are some things which we can do in general
02:15so we use button tag selector
02:22we give padding to it
02:2410px from top and 15px from sides
02:33so here is our style of buttons
02:39now we give background color
02:41we make background color transparent
02:46so here is our background color transparent
03:00now we use our hover effects
03:04first of all we do it in btn1
03:09hover is a class so it has a single column
03:13we put hover effect
03:15so that whenever it comes on the mouse button we can change its background color
03:20we make background color green
03:23as now its text is black
03:26so when green comes black text is not visible
03:29so for that we change its color
03:32ghost white
03:37now we hover on our button
03:40so now we see black text and no background
03:43so it changed its color
03:48transition 0.4 seconds
03:56so it used to happen suddenly but now it is delaying
04:00we can extend it more
04:03for example 1 second
04:07so it will load it slowly
04:12after this if we use same style for btn2
04:26by changing its color
04:33btn2
04:35we change its color
04:38drag
04:42we can style our buttons like this
04:51there is one more thing
04:54our buttons edges are very sharp
04:58so for that we use border radius
05:01we can give it as much curve as we want
05:07for example we use 7px
05:11like this
05:13if we want to make it circle
05:16so for that we have to write height
05:20height for 7px
05:2870px
05:30now we give it 50% instead of border radius
05:37so what it will do
05:39it will make a complete circle
05:42for our buttons
05:44so like this we can modify our buttons
05:48and we can implement different functionalities
05:51and different styling
05:54see you in next video
05:56till then take care
05:58Allah hafiz
06:06you
Comments