how to design button css code example

Example: button styling css

.button {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 400 !important;
    background-color: #e63946ff;
    color: #fff;
    padding: 23px 50px;
    margin: auto;
    text-align: center;
    display: inline-block !important;
    text-decoration: none;
    border: 0px;
    width: max-content;
    cursor: pointer;
    transition: all 0.3s 0s ease-in-out;
}

.button:hover {
    transform: scale(1.04, 1);
    background-color: rgb(216, 10, 27);
    text-decoration: none;
}

/* add extra functionality in button*/


/*button sizes*/
.btn_sm {
    padding: 17px 40px !important;
}

.btn_md {
    padding: 20px 50px !important;
}

.btn_lg {
    padding: 23px 60px !important;
}


/*make your button block level*/
.btn_block {
    width: 100% !important;
    padding: 22px 30px !important;
}

Tags:

Css Example