تغییر اندازه یک دکمه (Button)، با مشخصه های padding و font-size ، در CSS

برای تغییر اندازه یک دکمه (Button)، هر دو مشخصه padding و font-size در CSS می توانند به کار روند. مشخصه padding برای ایجاد حاشیه (padding) به کار می رود و مشخصه font-size نیز اندازه فونت (Font) متن نمایش داده شده در دکمه (Button) را تعیین می کند، بنابراین با افزایش هر یک از این دو، اندازه دکمه (Button) افزایش می یابد.

معمولا به کار بردن هر دو مشخصه padding و font-size ، باعث ایجاد ظاهری زیبا برای دکمه (Button) در اندازه بزرگ می شود. بنابراین بهتر است که هر دوی آنها را به کار ببرید (میزان تغییرات آنها نیز بستگی به سلیقه شما دارد).

برای این منظور، هر دو مشخصه padding و font-size را برای تگ button که برای ساخت دکمه (Button) به کار می رود ( کلید شماره 2795 )، ذکر می کنیم :

یعنی به صورت زیر :

و یا می توانیم کدهای CSS را برای یک کلاس (Class) تعریف کنیم :

و سپس کلاس (Class) مورد نظر را برای تگ های button مورد نظرمان در صفحه، ذکر نماییم :

به مثال زیر توجه کنید :

مثال

کد کامل صفحه HTML :

<!DOCTYPE html>
<html>
    <head>
        <style>
            .kelidestan_button_1 {
                padding:0px;
                font-size:10px;
            }
            .kelidestan_button_2 {
                padding:5px;
                font-size:15px;
            }
            .kelidestan_button_3 {
                padding:10px;
                font-size:20px;
            }
            .kelidestan_button_4 {
                padding:15px;
                font-size:25px;
            }
            .kelidestan_button_5 {
                padding:20px;
                font-size:30px;
            }
            .kelidestan_button_6 {
                padding:25px;
                font-size:35px;
            }
        </style>
    </head>

<body>
        <button type="button">Button</button>
        <br><br>
        <button type="button" class="kelidestan_button_1">Button 1</button>
        <br><br>
        <button type="button" class="kelidestan_button_2">Button 2</button>
        <br><br>
        <button type="button" class="kelidestan_button_3">Button 3</button>
        <br><br>
        <button type="button" class="kelidestan_button_4">Button 4</button>
        <br><br>
        <button type="button" class="kelidestan_button_5">Button 5</button>
        <br><br>
        <button type="button" class="kelidestan_button_6">Button 6</button>
    </body>
</html>