CSS Buttons

CSS Buttons property is used to create and style buttons.

Below CSS properties are used to animate buttons.

  1. color
  2. background-color
  3. font-size
  4. text-align
  5. display
  6. border
  7. padding
  8. border-radius
  9. box-shadow
  10. cursor
  11. width
  12. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

88000