CODEWITHSUNDEEP
cssbutton
Nazanin
Nazanin

Reputation: 11

All my buttons look like each other

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="#" class="fa fa-google"></a>
    <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?

Upvotes: 1

Views: 46

Answers (2)

Nicoli
Nicoli

Reputation: 81

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.

Upvotes: 1

laptou
laptou

Reputation: 7039

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.

Upvotes: 1

Related Questions