Apply css to button element with certain class

Question

bluebutton.css

.btnBlue button{
Styles go here
}

.btnBlue button::-moz-focus-inner{
Styles go here
}

.btnBlue button:hover,button:focus{
styles go here
}

.btnBlue button:active{
Styles go here
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>Css buttons</title>
<link type='text/css' href='css/bluebutton.css' rel='stylesheet' media='screen' />
</head>
<body>
<button type="submit" class="btnBlue">Okay</button>
</div>
</body>
</html>

This does not seem to work. I know it works if i try to do it without the .btnBlue but i want to create different button styles. So like i can define for each button what style to use.

myrn · Accepted Answer · 2023-06-06 13:53:08Z

29

Think you need to change the stylesheet declarations here to:

button.btnBlue {
  /* Styles go here */
}

button::-moz-focus-inner.btnBlue {
  /* Styles go here */
}

button:hover.btnBlue,
button:focus.btnBlue {
  /* Styles go here */
}

button:active.btnBlue {
  /* Styles go here */
}

edited Jun 6, 2023 at 13:53

myrn

1675 bronze badges

answered Apr 1, 2011 at 10:37

simnom

2,6201 gold badge25 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Apply css to button element with certain class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related