[英]Trying to edit my javascript button using 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>
button
is not a class, it's an html object. button
不是类,而是html对象。 Either reference an item in css by a class name using .<<classname>>
or by id #<<id here>>
or, reference all elements by using the element in this case button
without .
或者通过使用一个类名在CSS中引用的项目
.<<classname>>
或ID #<<id here>>
或者,通过参考在这种情况下,使用元素的所有元素button
没有.
or #
: 或
#
:
Example: 例:
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>
.button
is class selector. .button
是类选择器。 There is no reference of button
class in your html. 您的html中没有
button
类的引用。 I guess you are looking for button
which is a tag selector in css. 我猜你在找
button
,它是css中的标签选择器。
So replace .button
with button
in css or add class button to html 因此,用CSS中的
button
替换.button
或将类按钮添加到html中
<button id="myBtn" class ="button">The Red Hot Chili Peppers</button>
Remove "#myBtn" from button HTML tag and add class instead which you are in css for styling which is ".button". 从按钮HTML标记中删除“ #myBtn”,并添加在CSS中用于样式设置的类“ .button”。 So your button tag looks like:
因此,您的按钮标签如下所示:
.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>
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>
Your button uses an id, your css references a class .button, should be #myBtn or button 您的按钮使用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>
在HTMl中添加按钮类名称
<button class ="button" id="myBtn">The Red Hot Chili Peppers</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.