javascript - 尝试使用 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 对象。使用 .<<classname>> 通过类名引用 css 中的元素或按 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>