html button styles

how to styling html button with css.? this page helps you to understand ho to add styles to buttons.

basic butto without any styles

set background and text color

.btn1{

background:red;

color:blue;

}

set border

.btn2{

background:#b54242;

color:#fff;

border:3px solid #ddd;

}

remove border

.btn3{

background:reg(181,66,66);

color:#fff;

border:none;

}

add padding

.btn4{

background:#b54242;

color:#fff;

border:none;

padding:10px;

}

add border radius and dynamically change styles when hover over button

.btn5{

background:#b54242;

color:#fff;

border:none;

border-radius:5px;

padding:10px;

}

.btn5:hover{

background:#fff;

color:#b54242;

border:none;

border-radius:5px;

border:1px solid #ddd;

}

add multiple colors to button background

.btn6{

background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);

color:#fff;

border:none;

border-radius:5px;

padding:10px;

}

change background opacity

.btn7{

background:rega(181,66,66,0.3);

color:#fff;

border:none;

padding:10px;

}