Question

我正在尝试创建一个简单的按钮并使用CSS3进行设计并在pastebin中进行预览。我不知道要添加到我的代码中的内容，以便它显示带有设计的按钮，因为它只显示一个简单的按钮。

CSS代码：

.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -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: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

HTML code：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <title>JS Bin</title>
</head>
<body>
<button type="button">Click Me!</button>
</body>
</html>

Answer 1

删除CSS中.之前的button。

.button {
    background: red;
}

将 class “button”的所有元素设为红色，而

button {
    background: red;
}

将所有按钮元素设为红色。

Answer 2

即使您没有使用表单，使用简单的链接也会很好地应用您的样式。另外，请务必在代码中使用class来正确应用样式。

 <a class="button">Click Me!</button>

Answer 3

您在css .button中指定的是一个类。

您需要将其添加到按钮元素。

当然，你可以将它添加到你想要的任何元素。

根据您的代码，它应该像

<button type="button" class="button">Click Me!</button>

Answer 4

您创建了按钮类，但您没有应用它。只需将按钮类添加到按钮输入即可。它会工作得很好。

<button type="button" class="button">Click Me!</button>

以下是输出链接：

http://jsbin.com/dizej/1/edit?html,css,output

使用css3的简单按钮

4 个答案: