How do I properly apply CSS to button elements? - html

Question

all. Very new to HTML and CSS, and I'm having trouble applying CSS to some buttons. Here's the code:
HTML:
<div class="top-buttons">
<button id="first-button">One</button>
<button id="second-button">Two</button>
<button id="third-button">Three</button>
<button id="fourth-button">Four</button>
<div>
CSS
.button {
display: inline-block;
border: none;
/* padding */
text-align: center;
text-decoration: none;
/* font-size */
margin: 15px 30px;
cursor: pointer;
color: #564946;
}
#first-button{
border-radius: 20%;
}
I was toying around and was able to get only the border-radius to work; none of the other properties worked, even when I switched it from .button to .top-buttons. Any ideas? Only other thought I have at this point is it may be the text editor I'm using? I just stuck with Atom because I had previously installed it. Thank you so much in advance!

Answer 1

Your buttons are wrapped within <button></button> tags, whereas you are applying your styling to .button class, so if you want to apply global styling to those buttons, you should use following to apply styling to button tag:
button {
display: inline-block;
border: none;
/* padding */
text-align: center;
text-decoration: none;
/* font-size */
margin: 15px 30px;
cursor: pointer;
color: #564946;
}

Answer 2

you only need to specify the element that you what to affect.
For example, there are two ways to solve that
Styles only for the buttons inside .top-buttons:
.top-buttons > button {
display: inline-block;
border: none;
text-align: center;
text-decoration: none;
margin: 15px 30px;
cursor: pointer;
color: #564946;
}
Styles for all buttons
button {
display: inline-block;
border: none;
text-align: center;
text-decoration: none;
margin: 15px 30px;
cursor: pointer;
color: #564946;
}