Html 如何使这些按钮具有不同的样式？

所以我对HTML和CSS是新手。我正在尝试使顶部的按钮（立即获取）与底部的按钮（立即注册）不同。我参加了不同的课程，尝试了id，但似乎不起作用。如有任何建议，将不胜感激。谢谢大家!

*{
-moz框大小：边框框；
/*Firexfox*/
-webkit框大小：边框框；
/*Safari/Chrome/iOS/Android*/
框大小：边框框；
/*即*/
}
身体{
字体系列：“开放式Sans”、Arial、Sans serif；
}
.标题{
背景图片：url（“../images/header_bg.jpg”）；
背景尺寸：封面；
宽度：100%；
高度：700px；
保证金：0自动；
填充顶部：20px；
文本对齐：居中；
}
.标题a：链接，
答:访问,，
a:悬停，
a:主动的{
颜色：#033048；
字号：28px；
字号：800；
填充：11px 56px 11px 56px；
背景#f9e42e；
边界半径：5px；
文字装饰：无；
文本对齐：居中；
}
.福利{
左侧填充：120px；
填充顶部：60px；
填充底部：60px；
背景色：#f0efeff；
}
h1{
字号：800；
字体大小：48px；
颜色：#fff；
文本对齐：左对齐；
左侧填充：120px；
}
氢{
字体大小：48px；
字号：600；
填充顶部：128px；
填充底部：90px；
文本对齐：居中；
颜色：#fff；
}
h3{
字体大小：40px；
字号：600；
颜色：#033048；
}
h4{
字号：800；
字体大小：48px；
颜色：#f9e42e；
边际：0px；
填充底部：40px；
}
p{
字号：26px；
字体大小：300；
颜色：#606161；
线高：38px；
}
保险商实验室{
字号：26px；
字体大小：300；
颜色：#606161；
线高：38px；
}
.福利{
宽度：640px；
}
.福利保险{
宽度：640px；
}
.引用{
背景图片：url（“../images/commential_bg.jpg”）；
背景尺寸：封面；
宽度：100%；
文本对齐：居中；
填充：60px 300px 60px 300px；
线高：36px；
}
.报价p{
颜色：#fff；
字号：18px；
字体大小：300；
字体：斜体；
}
#归属{
字体大小：36px；
字号：600；
字体风格：普通；
利润率：6px；
}
.酒吧{
背景色：#f9e42e；
填充顶部：60px；
填充底部：60px；
文本对齐：居中；
保证金：0自动；
}
.bar a:链接，
答:访问,，
a:悬停，
a:主动的{
颜色：#fff；
字号：28px；
字号：800；
填充：11px 56px 11px 56px；
背景：#033048；
边界半径：5px；
文字装饰：无；
文本对齐：居中；
}
.页脚{
文本对齐：居中；
背景色：#121212；
填充顶部：60px；
填充底部：60px；
保证金：0自动；
}
.页脚p{
颜色：#fff；
字号：18px；
字号：600；
左侧填充：25px；
右边填充：25px；
填充顶部：40px；
}
.页脚a{
左侧填充：25px；
右边填充：25px；
}

放松
只需轻敲一下，你就可以心神不宁了
利益
完美的私人助理。Relaxr为您做好您的工作，让您可以尽情享受生活


•为您安排会议
•Excel自动化为您完成工作
•代表您回复电子邮件
•利用我们革命性的人工智能技术为您完成所有工作

“Relaxr改变了我的生活。我可以环游世界，花有限的时间工作，我的老板一直感谢我的工作。”

-阿曼达，因特
放松




版权所有2015。放松

您应该直接将类添加到按钮中。这将比使用所有那些复杂的选择器更易于维护

---

ID和类应该可以工作。。。

---

如果您只是犯了一个简单的错误，请记住ID是用#，比如#foo调用的，类是用句点（.），比如.bar调用的。除此之外，我不确定。

按钮确实有不同的样式

*{
-moz框大小：边框框；
/*Firexfox*/
-webkit框大小：边框框；
/*Safari/Chrome/iOS/Android*/
框大小：边框框；
/*即*/
}
身体{
字体系列：“开放式Sans”、Arial、Sans serif；
背景：#000；
}
.标题{
保证金：0自动；
填充顶部：20px；
文本对齐：居中；
}
.标题a：链接，
答:访问,，
a:悬停，
a:主动的{
颜色：#033048；
字号：28px；
字号：800；
填充：11px 56px 11px 56px；
背景#f9e42e；
边界半径：5px；
文字装饰：无；
文本对齐：居中；
}
.酒吧{
填充顶部：60px；
填充底部：60px；
文本对齐：居中；
保证金：0自动；
}
.bar a:链接，
答:访问,，
a:悬停，
a:主动的{
颜色：#fff；
背景：蓝色；
字号：28px；
字号：800；
填充：11px 56px 11px 56px；
边界半径：5px；
文字装饰：无；
文本对齐：居中；
}

---

您只需要添加这样的类

<a target="_blank" href="https://www.blissworld.com/spa-landing" class="TopButton">Get it Now</a>

---

提琴：按钮已经有了不同的风格，并且工作得很好。请详细说明这个问题。感谢大家迄今为止的反馈。作为一个新手，我真的很感激！至于给我的按钮添加类，我试过了，但没有成功。问题可能是我在Css中编写它的方式吗？我会把上面的例子写成“.btn btn primary a:link，a:visted，a:hover，a:active”吗？或者我也需要叫div班的学生吗？没关系。我玩过它，并根据您的回复和用户5504817让它工作。非常感谢！！！令人惊叹的！非常感谢。真管用！

.TopButton {
  background-color:lightgray;
  border:solid;
  padding:3px;
}