Change the style of a button from one page without affecting the other buttons from other pages-CodePudding

Any ideas on how i can execute this?

button {
    background: #1c00b5;
    width: 100px;
    border: none;
    outline: none;
    color: #fff;
    height: 35px;
    border-radius: 30px;
    margin-top: 20px;
    box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);}

i have tried to add "body .contact button" to let css file know it is the contact us page i am editing but it wont work it only goes to change the style on my other pages aswell so essentially.

body .contact button {
    background:

but this doesnt work, any ideas how i can change the style of this button without affecting the others in my css file?

CodePudding user response：

The .contact does not mean the contact page but instead refers to a class called contact.

You could give each of the buttons a different class for example if you wanted one to be red and the other blue:
HTML page 1:

<button >This is a red button</button

HTML page 2:

<button >This is a red button</button

CSS file:

.button-red {
    background-color: red;
}

.button-blue {
    background-color: blue;
}

Just change the colours to your own styling. Hope this helps.

CodePudding user response：

Suppose we have a button

<button> your text </button>

and we ave to use this CSS/style

    background: #1c00b5;
    width: 100px;
    border: none;
    outline: none;
    color: #fff;
    height: 35px;
    border-radius: 30px;
    margin-top: 20px;
    box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);

so, we will add a id to button like

<button id="contact-btn"> your text </button>

and then add style using id selector

#contact-btn{
        background: #1c00b5;
        width: 100px;
        border: none;
        outline: none;
        color: #fff;
        height: 35px;
        border-radius: 30px;
        margin-top: 20px;
        box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
}

it will work thanks

CodePudding user response：

You really need to search online for 'CSS selectors' and learn how and why to use them.

An example: create CSS rules that are true for all button and create exceptions to those rules using specific selectors. E.g. all buttons are green, except a contact button is red.

The generic rules can be put in a separate CSS file and <link>ed in a document. Create the specific rules in-document with a <style> block to override/modify/add to the linked generic rules.

There are many alternative ways to solve your issue, this is just one of them...

Tip: CSS rules are nothing more than an eleborate list of logical statements varying from easy to virtually unexplicable selectors to modify the style of your document:

if selector,
   list-of-selectors,
   very-special-selectors
   what-does-this-one-do?!?-selector then { property: value }

example

/* put this in an external CSS file */
button         { background-color: green }

/* put this in a <style> block */
button.contact { background-color: red }

<button>generic 1</button>
<button>generic 2</button>
<button>generic 3</button>
<br>
<button >contact</button>