漂亮的网页按钮,行为得体,能做到吗?

我真的要在肮脏的发型和糟糕的造型之间做出选择吗?

不,你可以像我们一样使用Javascript。在标准表单中加载(使用submit按钮完成),然后使用编写整洁的Javascript动态“修复”一些难看的元素。如果您希望使用干净的代码并获得跨浏览器支持,我建议您为这类事情评估jQuery框架。

见 this tutorial . 在IE6到IE8中没有JavaScript,没有链接而不是按钮。

对于我的应用程序,我想很好地设计提交按钮的样式。使用普通的CSS,我设法让它在Firefox中看起来不错,在IE中看起来很糟糕。

你需要加上 overflow: visible; 以摆脱“无法解释的”填充。这基本上就是你需要考虑的IE(只要你不是在怪癖模式)。

然后我看到了这篇博文:

不会去的。坚持住 <button type="submit"> 或 <input type="submit"> 用一张很好的CSS图片。你甚至可以在这些按钮上使用CSS背景图片。我也不会使用Javascript来解决布局问题,因为这可能会导致“wtf?”在页面加载过程中,当用户立即看到页面的某些部分快速变化时的体验。用CSS这个聪明的方法。

你可以把你提到的那个液体按钮 <button type="submit"></button> 通过替换周围的 <div> s由 button 元素,以及 <a> s由 <span> s。

是的,你知道。

除了它不是“糟糕的风格”,它是浏览器的铬。表单元素是浏览器的一部分他们的风格混淆了用户和阻碍可用性。说真的,别管他们。

不管你在输入样式上走多远,你都不可避免地会碰到文件上传元素的砖墙,这几乎是不可能的样式。如果你不能把它们都做出来,为什么要把它们都做出来。

说真的,这类似于设置滚动条的样式。不用麻烦了。

实际上,您不必使用Javascript或任何类似的东西。你也可以用按钮。

从继续 http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ 进行以下更改:

1. 在CSS声明中添加以下内容

   .btn按钮{ 浮动:左; 高度:40px; 背景:url(images/btn_拉伸.png)重复-x左上; 线高:40px; 填充:0 10px; 颜色:#fff; 字号:1em; 文字装饰:无; 边框:0; }

2. 在HTML代码中添加以下内容:

   <div class=“btn btn_learnmore”> <button>您应该尝试一下<button> <span></span> </分区>

编辑: 同时将margin:0添加到按钮css声明中。

您可以使用一个普通的提交按钮,并使用JavaScript将其替换为一个漂亮的JS增强按钮。这样,您只能在知道支持JavaScript的地方使用JavaScript,并且不会给NoScript用户留下一个断开的页面

看看你的纽扣。。。他们好像已经知道了

http://developer.yahoo.com/yui/examples/button/btn_example01.html

我相信有一个 <input type="image" src="ButtonBg.jpg" />

http://webdesign.about.com/cs/forms/a/aaformsubmit.htm

但我从来没有真正使用过。

你看过很棒的纽扣吗?

http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

它们非常棒,可以应用于链接或按钮,在我尝试过的所有浏览器中看起来都很不错(ie6有一些小问题,但是一点css只是为它们修复了一些问题)。

我们只是用CSS来制作一些非常好看的按钮。适用于IE6-8和Firefox。

input.blueButton
{
    background-image: url(../Images/blueButton.gif);
    width: 80px;
    height: 21px;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    color: White;
    background-color: Transparent;
    border-style: none;
    cursor: pointer;
    padding-bottom: 1px;
    margin: 0 3px;
}