How to change the width of a HTML button using HTML and CSS

Button Width

Change the width of button using the width property

Sample code: To change the width of HTML button

<!DOCTYPE html>
<html>
<head>
<style>
    .button
    {
        background-color: green;
        border: none;
        color: white;
        padding: 14px 28px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .button1 {width: 250px;}
    .button2 {width: 50%;}
    .button3 {width: 100%;}
</style>
</head>
<body>
    <h2>Button Width</h2>
    <p>Change the width of button using the width property</p>
    <button class="button button1">250px</button>
    <br><button class="button button2">50%</button>
    <br><button class="button button3">100%</button>
</body>
</html>

How to change the width of HTML button using HTML and CSS

Friday, June 9, 2017

How to change the width of a HTML button using HTML and CSS

Button Width

Sample code: To change the width of HTML button