Menu
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.
439
To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.
You can create a selector that will target specific elements with the class applied.
Classes (i.e. classnames) are used for styling the button element. Multiple classnames are separated by a space. JavaScript uses classes to access elements by classname. Tip: class is a global attribute that can be applied to any HTML element.
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 }
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
