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

Trying to edit my javascript button using css

本文关键字：我的 JavaScript 按钮 编辑 css      更新时间：2023-09-26

.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>
我希望按钮不是那种无聊的经典窗口按钮外观。我以我想要的方式获得了 CSS，但它没有显示在按钮中。我做错了什么，导致按钮现在具有定义的样式？我缺少什么才能使其工作？

button不

是一个类，它是一个html对象。要么使用 .<<classname>> 或 id #<<id here>> 通过类名引用 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 id="myBtn">The Red Hot Chili Peppers</button>

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

因此，在 css 中将.button替换为button或将类按钮添加到 html

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

杰斯菲德尔

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

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>

你的按钮使用 id，你的 css 引用一个类 .button，应该是 #myBtn 或按钮

#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>
相关文章：