Tutorials Tonight's Logo

CSS BUTTONS


A button is used to perform certain tasks when clicked.

Example:

  • A button can be used to invoke certain kind of function

  • Fibonacci is sum of two preceding numbers

    Fibonacci here...

    click to see fibonacci series
  • A button can be used to take you to another page



styling button using CSS

Using CSS properties we can design a button according to our need.

.button1{
    background-color: #38577b;
    color: white;
    padding: 10px;
}
▶ Run the code

Button border

Using border property you can define the border of the button.

.button1{
    border: 2px solid #38577b;
}
▶ Run the code

Output:

My button My button My button My button



Button size

Using font-size property you can adjust the size of the button.

.button1{
    font-size: 12px;
}
▶ Run the code

Output:

My button My button My button My button


Button shadow

Using box-shadow property you can get button shadow.

.button1{
    box-shadow: 5px 5px 10px gray;
}
▶ Run the code

Output:

My Button


Button Hover

Using :hover selector you can define hover property.

.button1:hover{
    background-color: #38577b;
    color: white;
    text-decoration: none;
    box-shadow: 5px 5px 10px gray;
}
▶ Run the code

Output:

My Button My Button My Button My Button


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.