تغییر رنگ (رنگ پس زمینه) یک دکمه (Button)، با مشخصه background-color ، در CSS

برای تغییر رنگ (رنگ پس زمینه) یک دکمه (Button)، باید از مشخصه background-color در CSS استفاده نماییم. برای این منظور، مشخصه background-color را برای تگ button که برای ساخت دکمه (Button) به کار می رود ( آموزش شماره 2795 )، ذکر می کنیم :

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

که در آن، کد معادل رنگ مورد نظرمان ( #F00 ) را برای مشخصه background-color می نویسیم.

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

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

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

مثال

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            .kelidestan_button_1 {
                background-color:#F00;
            }
            .kelidestan_button_2 {
                background-color:#0CF;
            }
            .kelidestan_button_3 {
                background-color:#0C6;
            }
            .kelidestan_button_4 {
                background-color:#FF0;
            }
            .kelidestan_button_5 {
                background-color:#F0F;
            }
            .kelidestan_button_6 {
                background-color:#F63;
            }
        </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>