CSS Buttons property is used to create and style buttons.
Below CSS properties are used to animate buttons.
- color
- background-color
- font-size
- text-align
- display
- border
- padding
- border-radius
- box-shadow
- cursor
- width
- float
You can give shadow, border, rounded, colored , background image style to button using above properties.
Syntax :
<style>
button{
color:#FFFFFF;
background-color:#000099;
border:#999999 solid 1px;
padding:16px;
text-align:center;
vertical-align:middle;
transition-duration: 0.7s;
cursor:pointer;
font-weight:bold;
font-size:18px;
box-shadow: 0 9px 18px 0 rgba(0,0,0,0.8), 0 7px 22px 0 rgba(0,0,0,0.35);
display:inline-block;
margin:6px;
vertical-align:middle;
}
</style>
Example :
<html>
<head>
<title>Learn Css button tutorials by aryatechno</title>
</head>
<body>
<button id="btn" style="color:#FFFFFF;
background-color:#000099;
border:#999999 solid 1px;
padding:20px;
text-align:center;
vertical-align:middle;
transition-duration: 0.7s;
cursor:pointer;
font-weight:bold;
font-size:18px;
box-shadow: 0 9px 18px 0 rgba(0,0,0,0.8), 0 7px 22px 0 rgba(0,0,0,0.35);
display:inline-block;
margin:6px;
vertical-align:middle;">Button</button>
</body>
</html>
Output:
Comments