Button | HTML CSS
#shorts #html #css #webdevelopment
In this video, we defined button is defined using the "button" tag, and the associated label is defined using the "label" class.
The CSS properties used to style the button are as follows:
display: flex; - This sets the display property of the button to "flex", which allows it to be positioned easily.
gap: 2px; - This sets the gap property between the elements inside the button to 2 pixels.
padding: 5px 10px; - This sets the padding of the button to 5 pixels at the top and bottom, and 10 pixels on the left and right.
font-size: 18px; - This sets the font size of the button to 18 pixels.
font-weight: bold; - This sets the font weight of the button to "bold".
color: white; - This sets the color of the text in the button to white.
border: none; - This sets the border of the button to none.
outline: none; - This removes the outline that is displayed when the button is clicked.
background-color: #ffa449; - This sets the background color of the button to #ffa449.
border-radius: 2px; - This sets the border radius of the button to 2 pixels.
align-items: center; - This centers the content of the button vertically.
transition: 1s; - This sets the transition property of the button to 1 second.
overflow: hidden; - This hides any content that overflows the button.
cursor: pointer; - This sets the cursor of the button to a pointer, indicating that it is clickable.
The label is defined using the "label" class, which has the following CSS properties:
width: 0px; - This sets the width of the label to 0 pixels.
transition: 1s; - This sets the transition property of the label to 1 second.
overflow: hidden; - This hides any content that overflows the label.
When the button is hovered over, the width of the label is increased from 0 pixels to 80 pixels using the CSS selector "button:hover .label". This creates an animation effect where the label slides out from underneath the button.
how to create button
create button with on hover label effect
on button hover label show and hide
button with label effect
On this page of the site you can watch the video online Button | HTML CSS with a duration of hours minute second in good quality, which was uploaded by the user MakeItCoder 01 May 2023, share the link with friends and acquaintances, this video has already been watched 158 times on youtube and it was liked by 7 viewers. Enjoy your viewing!
