Question

我的页面中心有两个按钮，采用这种css设计。

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;
}

我的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>

我正在尝试创建另一个具有不同css设计的按钮，但我的第三个按钮继承了前两个的css设计，看起来有点像它们。我该怎么办呢？

Answer 1

首先，您必须为规则中具有不同样式的.googleBtn声明CSS规则。另外我注意到CSS中的两个规则#layoutBtn和#javaBtn样式完全相同。相反，您可以使用该按钮样式为#layoutBtn和#javaBtn定义一个规则，为.googleBtn定义另一个规则。

Answer 2

第三个按钮看起来像前两个按钮，因为您没有创建特定于它的样式。您的第一条规则适用于页面上的所有按钮：

button {
    outline: none;
    text-align: center;
    border-radius:15px 50px 30px;
}

与您的后两条规则不同，您在此处写了button而不是.button。这意味着它将选择button类型的所有元素，而不是所有具有class="button"的元素。

此外，如果您想要第三个按钮（我假设这是class="googleBtn"的那个按钮）看起来非常不同，那么您必须创建一个选择它的样式规则，如下所示：

.googleBtn {
    color: red;
    /* replace this with your style rules */
}

附注：HTML align属性和<font>元素已弃用年。请不要使用它来格式化您的页面。

我的所有按钮看起来都像是彼此

2 个答案: