All my buttons look like each other - css

Question

I have two buttons at the centre of my page with this css design.
button{
outline: none;
text-align: center;
border-radius:15px 50px 30px;
}
.button:hover {background-color: #3e8e41}
.button:active{
background-color: #3e8e41;
box-shadow:0 5px #666;
transform:translateY(4px);
}
#javaBtn{
color: #fff;
box-shadow:0 9px #999;
background-color:#2ECC71;
border: none;
padding: 15px 30px;
cursor: pointer;
font-size: 12px;
}
#layoutBtn{
color: #fff;
box-shadow:0 9px #999;
background-color:#2ECC71;
border: none;
font-size: 12px;
padding: 15px 20px;
cursor: pointer;
}
My html:
<div align="center">
<img src="yalda.jpg" class= "mainPic">
</div>
<div align="center">
<button class="button" id="layoutBtn">Layouts</button>
<button class="button" id="javaBtn">Java</button>
</div>
<div align="left">
<img src="me.jpg" class= "myPic">
<p><font color="white"> <i>some text</i></font></p>
<a href="&" target="_blank" class="fa fa-linkedin" ></a>
<button class="googleBtn">some text</button>
</div>
I am trying to create another button with a different css design but my third button inherits the css design from the first two and looks kinda like them. What can I do about it?

Answer 1

The third button looks like your first two buttons because you did not create a style that is specific to it. Your first rule applies to all of the buttons on the page:
button {
outline: none;
text-align: center;
border-radius:15px 50px 30px;
}
Unlike your second two rules, here you wrote button and not .button. This means that it will select all elements of type button, not all elements that have class="button".
Additionally, if you want your third button (I am assuming that this is the one with class="googleBtn") to look very different, then you must create a style rule that selects it, like so:
.googleBtn {
color: red;
/* replace this with your style rules */
}
Side note: the HTML align attribute, and the <font> element have been deprecated for years. Please do not use this to format your page.

Answer 2

First, you have to declare a CSS rule for .googleBtn with different styles in the rule. Also I noticed that the two rules in your CSS, #layoutBtn and #javaBtn, styles are exactly the same. Instead, you can define one rule for both #layoutBtn and #javaBtn with that style of button and another for .googleBtn.