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
Auf dieser Seite können Sie das Online-Video Button | HTML CSS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer MakeItCoder 01 Mai 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 158 Mal angesehen und es wurde von 7 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
