The best CSS Button Tutorial In 2024, In this tutorial you can learn
Basic Button Style,Button color,Button Size,Rounded button,Button border color,Hover Button,Button shadow,Disable button,Button Width,Button Group,With border Button Group,Button Animation,
CSS Button
This section, we introduce the use of CSS to create the button.
Basic Button Style Default button CSS Button
CSS Examples .button { background-color: # 4CAF50; / * Green * / border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }
Button color Green Blue Red Gray Black
We can use the background-color
property to set the button color:
CSS Examples .button1 {background-color: # 4CAF50;} / * Green * / .button2 {background-color: # 008CBA;} / * Blue * / .button3 {background-color: # f44336;} / * Red * / .button4 {background-color: # e7e7e7; color: black;} / * Gray * / .button5 {background-color: # 555555;} / * Black * /
Button Size 10px 12px 16px 20px 24px
We can use the font-size
property to set the size of the button:
CSS Examples .button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;}
Rounded button 2px 4px 8px 12px 50%
We can use the border-radius
property to set the fillet button:
CSS Examples .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}
Button border color Red Green Blue Grey Black We can use the border
property of a button border color:
CSS Examples .button1 { background-color: white; color: black; border: 2px solid # 4CAF50; / * Green * / } /en.
Hover Button Red Green Blue Grey Black Red Green Blue Grey Black We can use the :hover
selector to modify the style by hovering over the button.
Tip: We can use the transition-duration
property set to "hover" effect speed:
CSS Examples .button { -webkit-transition-duration: 0.4s; / * Safari * / transition-duration: 0.4s; } .button: hover { background-color: # 4CAF50; / * Green * / color: white; } /en.
Button shadow Display shadow after shadow button hover We can use the box-shadow
property to add a shadow to the button:
CSS Examples .button1 { box-shadow: 0 8px 16px 0 rgba (0,0,0,0.2), 0 6px 20px 0 rgba (0,0,0,0.19); } .button2: hover { box-shadow: 0 12px 16px 0 rgba (0,0,0,0.24), 0 17px 50px 0 rgba (0,0,0,0.19); }
Disable button Normal button to disable button We can use the opacity
property to add transparency (looks similar to "disabled" attribute effects) for the button.
Tip: What can I add cursor
property and set to "not-allowed" to set up a disabled image:
CSS Examples .disabled { opacity: 0.6; cursor: not-allowed; }
Button Width 250px 50% 100% By default, the size of the button text on the button has decided (based on text matching length). We can use the width
property to set the width of the button:
Tip: If you want to set a fixed width can use pixels (px) as a unit, if you want to set responsive buttons can be set as a percentage.
CSS Examples .button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}
Button Group Button Button Button Button
Remove from the outside and add float:left
set of buttons:
CSS Examples .button { float: left; }
With border Button Group Button Button Button Button
We can use the border
property to set the button group with border:
CSS Examples .button { float: left; border: 1px solid green }
Button Animation CSS Examples Mouse over the arrow button to add:
Hover
CSS Examples Add clicks "ripple" effect:
Click
CSS Examples Click when you add "pull-down" effect:
Click