Answers for "buttons styling css"

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;
}

button style css

<div>
    <style scoped="">
        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }
    </style>
    <button class="button-xsmall pure-button">Extra Small Button</button>
    <button class="button-small pure-button">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="button-large pure-button">Large Button</button>
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div>

button style css

<button class="pure-button pure-button-disabled">A Disabled Button</button>
<button class="pure-button" disabled="">A Disabled Button</button>

button style css

<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>