尝试使用CSS编辑我的JavaScript按钮

Question

 .button { border-top: 1px solid #262626; background: #f02805; background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#f02805)); background: -webkit-linear-gradient(top, #000000, #f02805); background: -moz-linear-gradient(top, #000000, #f02805); background: -ms-linear-gradient(top, #000000, #f02805); background: -o-linear-gradient(top, #000000, #f02805); padding: 5.5px 11px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 15px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle; } .button:hover { border-top-color: #9c1c13; background: #9c1c13; color: #ffffff; } .button:active { border-top-color: #e82b12; background: #e82b12; } 

 <button id="myBtn">The Red Hot Chili Peppers</button> 

我希望按钮不是那种无聊的经典Windows按钮外观。 我以我想要的方式获得了CSS，但是按钮中没有显示它。 我在做什么错导致按钮现在具有已定义的样式？ 我想让它起作用吗？

Answer 1

button不是类，而是html对象。 或者通过使用一个类名在CSS中引用的项目.<<classname>>或ID #<<id here>>或者，通过参考在这种情况下，使用元素的所有元素button没有. 或# ：

例：

 button { border-top: 1px solid #262626; background: #f02805; background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#f02805)); background: -webkit-linear-gradient(top, #000000, #f02805); background: -moz-linear-gradient(top, #000000, #f02805); background: -ms-linear-gradient(top, #000000, #f02805); background: -o-linear-gradient(top, #000000, #f02805); padding: 5.5px 11px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 15px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle; } button:hover { border-top-color: #9c1c13; background: #9c1c13; color: #ffffff; } button:active { border-top-color: #e82b12; background: #e82b12; } 

 <button id="myBtn">The Red Hot Chili Peppers</button> 

Answer 2

.button是类选择器。 您的html中没有button类的引用。 我猜你在找button ，它是css中的标签选择器。

因此，用CSS中的button替换.button或将类按钮添加到html中

<button id="myBtn" class ="button">The Red Hot Chili Peppers</button>

杰斯菲德尔

Answer 3

从按钮HTML标记中删除“ #myBtn”，并添加在CSS中用于样式设置的类“ .button”。 因此，您的按钮标签如下所示：

 .button { border-top: 1px solid #262626; background: #f02805; background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#f02805)); background: -webkit-linear-gradient(top, #000000, #f02805); background: -moz-linear-gradient(top, #000000, #f02805); background: -ms-linear-gradient(top, #000000, #f02805); background: -o-linear-gradient(top, #000000, #f02805); padding: 5.5px 11px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 15px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle; } .button:hover { border-top-color: #9c1c13; background: #9c1c13; color: #ffffff; } .button:active { border-top-color: #e82b12; background: #e82b12; } 

 <button class="button">The Red Hot Chili Peppers</button> 

Answer 4

 button { border-top: 1px solid #262626; background: #f02805; background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#f02805)); background: -webkit-linear-gradient(top, #000000, #f02805); background: -moz-linear-gradient(top, #000000, #f02805); background: -ms-linear-gradient(top, #000000, #f02805); background: -o-linear-gradient(top, #000000, #f02805); padding: 5.5px 11px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 15px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle; } button:hover { border-top-color: #9c1c13; background: #9c1c13; color: #ffffff; } button:active { border-top-color: #e82b12; background: #e82b12; } 

 <button id="myBtn">The Red Hot Chili Peppers</button> 

Answer 5

您的按钮使用id，css引用一个类.button，应为#myBtn或button

 #myBtn { border-top: 1px solid #262626; background: #f02805; background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#f02805)); background: -webkit-linear-gradient(top, #000000, #f02805); background: -moz-linear-gradient(top, #000000, #f02805); background: -ms-linear-gradient(top, #000000, #f02805); background: -o-linear-gradient(top, #000000, #f02805); padding: 5.5px 11px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 15px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle; } #myBtn:hover { border-top-color: #9c1c13; background: #9c1c13; color: #ffffff; } #myBtn:active { border-top-color: #e82b12; background: #e82b12; } 

 <button id="myBtn">The Red Hot Chili Peppers</button> 

 button { border-top: 1px solid #262626; background: #f02805; background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#f02805)); background: -webkit-linear-gradient(top, #000000, #f02805); background: -moz-linear-gradient(top, #000000, #f02805); background: -ms-linear-gradient(top, #000000, #f02805); background: -o-linear-gradient(top, #000000, #f02805); padding: 5.5px 11px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 15px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle; } button:hover { border-top-color: #9c1c13; background: #9c1c13; color: #ffffff; } button:active { border-top-color: #e82b12; background: #e82b12; } 

 <button id="myBtn">The Red Hot Chili Peppers</button> 

Answer 6

在HTMl中添加按钮类名称

<button class ="button" id="myBtn">The Red Hot Chili Peppers</button>