CSS Changing Attribute of Specific Button

Question

I have a button with the button class button.ttfm2 but I want to change button[type="submit"]:hover this specific button:

At the moment my current code is:

.ttfm2 button[type="submit"]:hover {
background-color: #28AE47 !important;
}

What am i missing?

General advice: Use helper classes on the submit button so that you don't need to use the attribute selector. Also, use the specificity of your selectors to control the order of the cascade to avoid having to use !important. — Rick Viscomi
– Rick Viscomi, Commented Oct 7, 2015 at 7:11

m4n0 · Accepted Answer · 2015-10-07 07:49:38Z

3

The right code would be:

button[type="submit"].ttfm2:hover {
   background-color: #28AE47; /* avoid using !important */
}

You were trying to select the button of type submit inside ttfm2 element using descendant selector but you need to use the multiple selector i.e. the button that has a class ttfm2

Sample Output:

button[type="submit"].ttfm2 {
  transition: all ease 2s;
}
button[type="submit"].ttfm2:hover {
  background-color: #28AE47;
}

<button type="submit" class="ttfm2">Test</button>
<button class="ttfm2">This will not work</button>

edited Oct 7, 2015 at 7:49

answered Oct 7, 2015 at 7:01

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pepo_rasta · Accepted Answer · 2015-10-07 07:01:28Z

0

a selector:

button[type="submit"].ttfm2:hover {
   background-color: #28AE47 !important;
}

answered Oct 7, 2015 at 7:01

Pepo_rasta

2,91015 silver badges21 bronze badges

Collectives™ on Stack Overflow

CSS Changing Attribute of Specific Button

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related