Question

我想在html中创建一个按钮。当我点击它，它应该去内侧，如果我再次点击它应该出现。如何在CSS中做到这一点？

感谢

Answer 1

首先，创建一个元素作为样式元素：

<span class="toggle">Click!</span>

现在你可以设置这个元素的样式，就像Arve Systad描述的那样：

.toggle {
    padding: 5px;
    background: #DDD;
    border-top: 2px solid #CCC;
    border-left: 2px solid #CCC;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
}

.toggle.down {
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-right: 2px solid #CCC;
    border-bottom: 2px solid #CCC;
}

最后，使用javascript（或在我的示例中，jQuery）添加切换功能：

$(".toggle").click(function(){
  $(this).toggleClass("down");
});

如果使用javascript是个问题，则需要寻找其他解决方案。你可以使用一个复选框;此元素本身具有已检查和未检查的状态。但是，您可能无法在每个浏览器中以相同的方式设置复选框的样式;我甚至不知道你是否可以在IE中设置单独的状态。

Answer 2

我认为你不能使用html按钮。它没有“向上”和“向下”状态。

我认为您需要使用一个复选框，以便您有两种状态（它是带有复选框类型的html输入标记）。然后你可以使用一些JavaScript在复选框上显示两个不同的图像，具体取决于它是否被选中。

Answer 3

单独使用CSS无法实现这一目标。

您需要使用Javascript来更新保存按钮状态的布尔变量：按下或释放并相应地更改元素的css类。

例如，请参阅此jQuery UI demo或How do you create a toggle button?问题。

Answer 4

您可以在顶部和左侧设置白色边框，在底部和右侧设置黑色边框。只需按下按钮即可。如果这还不够，你可以使用图像。

button {
      border-width: 1px;
      border-color: white black black white;
      border-style: solid;
}
button:active {
      border-color: black white white black;
}

Answer 5

给它一个类，比如“按钮”，然后“反转”边框：活动。例如：

.button {
    padding: 5px;
    background: #DDD;
    border-top: 2px solid #CCC;
    border-left: 2px solid #CCC;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
}

.button:active {
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-right: 2px solid #CCC;
    border-bottom: 2px solid #CCC;
}

看起来像这样：http://jsfiddle.net/8wfw3/

Answer 6

你为什么不试试发电机？ http://css-button-generator.com/

像这样的代码示例...

<style type="text/css">
.css_btn_class {
    font-size:20px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #ffaa22;
    padding:16px 38px;
    text-decoration:none;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23) );
    background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
    background:-ms-linear-gradient( top, #ffec64 5%, #ffab23 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
    background-color:#ffec64;
    color:#333333;
    display:inline-block;
    text-shadow:1px 1px 0px #ffee66;
    -webkit-box-shadow:inset 1px 1px 0px 0px #fff6af;
    -moz-box-shadow:inset 1px 1px 0px 0px #fff6af;
    box-shadow:inset 1px 1px 0px 0px #fff6af;
}.css_btn_class:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
    background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
    background:-ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
    background-color:#ffab23;
}.css_btn_class:active {
    position:relative;
    top:1px;
}
/* This css button was generated by css-button-generator.com */
</style>

如何创建按钮？

6 个答案: