Trying to edit my javascript button using css

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> 

I wanted the buttons to not be that boring classic windows button look. i got the css the way I wanted it but it isn't showing in the button. What am I doing wrong that is causing the button to now have the defined style?? What am I missing to make it work?

Answer 1

button is not a class, it's an html object. 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 . 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> 

Answer 2

.button is class selector. There is no reference of button class in your html. I guess you are looking for button which is a tag selector in css.

So replace .button with button in css or add class button to html

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

Jsfiddle

Answer 3

Remove "#myBtn" from button HTML tag and add class instead which you are in css for styling which is ".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> 

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

Your button uses an id, your css references a class .button, should be #myBtn or 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>