如何创建按钮？

1

你不能做到这一点使用CSS孤单。

您需要使用Javascript来更新一个布尔变量，该变量包含按钮的状态：按下或释放并相应地更改元素的CSS类。

关于SO，请参见jQuery UI demo或How do you create a toggle button?问题。

来源

2010-05-13 11:55:45

+0

实际上，你甚至不需要一个变量，只需要对“正在按下”或“释放”的html元素的当前类进行操作 – 2010-05-13 12:20:47

2

首先，创建作为你的风格的元素的元素：

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

现在你可以样式此元素，像艾云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中设计独立的状态。

来源

2010-05-13 11:54:58 Scharrels

+1

我想什么他要求的是一种方法，链接样式，使它们看起来就像个按键，而不是使用表单控件。编辑：现在我已经重读他的帖子，他也在寻找一个切换按钮，我不认为你可以用窗体按钮做什么？（afaik） – 2010-05-13 11:56:42

+0

这就像，当我点击时，它会再次出现。其实，我不想等到它再次点击。喜欢它应该进去。如果我再次点击它应该会达到原始形状 – Manoj 2010-05-13 11:58:45

+1

确实，他在问如何模仿一种旧式的按钮控制，它比按钮更像复选框。你点击它，并保持“卡住”，直到你再次点击它。我经常想知道为什么在浏览器的不合格*辉煌时期，至少IE不允许你设计类似这样的复选框。 – 2010-05-13 12:00:09

0

给它一个类，像“按钮”，然后“反转”边界：激活。例如：

.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/

来源

2010-05-13 11:55:30

1

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

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

来源

2010-05-13 11:56:09

2

我不认为你可以用html按钮。它没有'上'和'下'的状态。

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

来源

2010-05-13 11:59:45 philhobgen

0

你为什么不试试发电机？这样 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>

来源

2013-01-01 19:19:35

如何创建按钮？

回答

相关问题