loading...

My CSS challenge "Set styles for the disabled buttons without CSS overriding"

melnik909 profile image Stas Melnikov Updated on ・2 min read

css-challenge (4 Part Series)

1) My CSS challenge. Create custom checkboxes and radio buttons using the attribute selector 2) My CSS challenge "Set styles for the disabled buttons without CSS overriding" 3) My CSS challenge. Align the avatar inside of the comment component using the margins 4) My CSS challenge. Use background-position syntax to customize the select element

What you need to know to solve this challenge: the :not(), :disabled pseudo-class, :hover pseudo-classes.

Hey friends. I wrote the CSS challenge for you. In this challenge we'll create styles for the disabled state of buttons. I started to do it and now buttons look as shown below:

But if I move mouse on the disabled button background and cursor changes.

That's the mistake. I suggest you fix it. Now there is the following code:

.button{
    background-color: #ff5c5c;
    color: #fff;
    cursor: pointer;
}

.button:disabled{
    color: #cac3c3;
    background-color: #f7f7f7;
}

.button:hover{
    background-color: #f97a7a;
}

Your challenge is to rewrite the .button and .button:hover selectors so that they don't apply to buttons with the disabled attribute.

You should complete the following steps:

  1. Download the css-challenges#7.zip file with source code here
  2. Go to the source_code folder
  3. Open the challenge.css file in your code editor
  4. Change the .button and .button:hover selectors using the :not() pseudo-class
  5. Check your solution using the solution.pdf file

I write different CSS challenges on my Patreon. I really want to help you to improve your CSS skills. I hope you'll want to test yourself and you'll check other challenges other css challenges out.

P.S. This post was written with the support of my patrons: Ashlea Gable, Tatiana Ten, Claire Collins, Ben Rinehart.

css-challenge (4 Part Series)

1) My CSS challenge. Create custom checkboxes and radio buttons using the attribute selector 2) My CSS challenge "Set styles for the disabled buttons without CSS overriding" 3) My CSS challenge. Align the avatar inside of the comment component using the margins 4) My CSS challenge. Use background-position syntax to customize the select element

Posted on by:

melnik909 profile

Stas Melnikov

@melnik909

I help people to learn new things about HTML and CSS on Patreon platform 👉 https://www.patreon.com/posts/34774556

Discussion

markdown guide