تغییر اندازه یک دکمه (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>

نتیجه :

دسته بندی دکمه ها (Button)، در CSS

نویسنده علیرضا گلمکانی

شماره کلید 26321

گزینه ها

به اشتراک گذاری (Share) در شبکه های اجتماعی

FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon

نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)