尝试使用css编辑我的javascript按钮

时间：2016-03-11 05:13:02

标签： javascript css 

.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，但它没有显示在按钮中。 我做错了什么导致按钮现在具有定义的样式？ 我错过了什么让它起作用？

6 个答案:

答案 0 :(得分：1)

button不是一个类，它是一个html对象。使用.<<classname>>或ID #<<id here>>通过类名引用css中的项目，或者使用此案例中的元素button引用所有元素，而不使用.或{{ 1}}：

示例：

＆＃13;
＆＃13; 
#
＆＃13; 
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;
   }
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

.button是类选择器。你的html中没有button类的引用。我想你正在寻找button这是css中的标签选择器。

所以在css中用.button替换button或将类按钮添加到html 

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

Jsfiddle

答案 2 :(得分：0)

从按钮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>

答案 3 :(得分：0)

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>

答案 4 :(得分：0)

你的按钮使用了一个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>

答案 5 :(得分：0)

在HTMl中添加你的按钮类名

<button class ="button" id="myBtn">The Red Hot Chili Peppers</button>
相关问题
最新问题