CSS Tutorials: Button in CSS | Button Styling - video Dailymotion

Web Artificer

Discover the ultimate guide to creating captivating buttons in CSS! In this tutorial, learn all about button styling and how to make your website stand out with unique designs. Whether you're a beginner or an experienced coder, this video has something for everyone looking to enhance their web development skills. From customizing colors to adding hover effects, we've got you covered. Get ready to take your CSS skills to the next level and catch the eye of every visitor with your stylish buttons. Watch now to become a pro at designing buttons in CSS! #buttons #CSS #buttonstyling #CSSButton #WebDesign #FrontendDevelopment #UIUX #WebDevelopment #Coding #DesignTips #ResponsiveDesign #ButtonStyles #CSS3 #ButtonStyling #WebDesign #UserExperience #UIUX #GraphicDesign #DigitalMarketing #FrontEndDevelopment #CSS3 #HTML5 #ResponsiveDesign #InteractiveDesign #VisualDesign #CreativeWebDesign #CallToAction #ClickableButtons #DesignInspiration #WebsiteDevelopment #MobileFriendlyDesign #ElegantButtons #moderndesign  Button styling in css? how to style button in css? Css styling in buttons?

Transcript

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

CSS Tutorials: Button in CSS | Button Styling

Category

Transcript

Be the first to comment

Recommended