Question

我正在寻找的是一种用“提交”类来绕过所有输入角的干净方法。我已经尝试了许多javascript技术，但没有一个适用于表单元素。纯CSS会很棒，但是，请注意，按钮需要展开，并且会有任意文本。其他方法需要围绕输入的HTML丑陋，我不想要。

有什么想法吗？

Answer 1

尝试CurvyCorners（30,100字节，缩小）此解决方案，因为IE浏览器不会使其四舍五入。我没有尝试过添加图片。

<style type="text/css">
.input-rounded-button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    padding:0 3px 0 3px;
    display:inline-block;
    text-decoration:none;
    background:#595651;

    color:#FFFFFF;
    cursor:pointer;
    font:11px sans-serif;
}

.input-rounded-button:hover { 
    text-decoration:none; 
    color:#ADD8E6; 
    cursor:pointer;
    border:1px solid #FF2B06;
}
</style>

<input class="input-rounded-button" type="button" value="SEARCH" />

Answer 2

我一直在使用这种方法 -

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

效果很好

Answer 3

也许这是你正在寻找的那种解决方法。虽然它不支持垂直缩放。（为什么你有多线提交按钮？）

http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php

它专门用于提交按钮，并支持相当合理的浏览器范围。

Answer 4

如果你能够使用CSS3，我知道最简单的方法就是：

.button
{
  background-color:#f57070;
  border-radius: 10px;    //-rounding the edges, only available in CSS3-//
  font-family:arial;
  font-size:30px;
  text-decoration:none;
}

使用html代码：

<a href=# class='button'>...</a>

制作一个带有圆边的漂亮红色按钮。

在表单提交按钮上呈现圆角的方法

4 个答案: