如何在 html 表单中使用自定义按钮答案

【问题标题】：how to use custom buttons in html forms如何在 html 表单中使用自定义按钮
【发布时间】：2014-05-03 11:24:11
【问题描述】：

我的网站上有一些表单，但我讨厌它们上的标准按钮。

我想自定义按钮，这样我就可以拥有自己构建的按钮。

我也想要一个翻转效果。

我设计的按钮是一个空白渐变背景按钮，上面没有文字。

我很乐意创建带有提交和重置文本的按钮的变体，如果这样可以让生活更轻松，但我想知道如何使用自定义按钮来获得最佳外观。

您能提供的任何帮助将不胜感激。

【问题讨论】：

标签： javascript html forms button rollover

【解决方案1】：

您可以使用 css 覆盖或自定义默认按钮。您可以使用类名或 id 或默认按钮标签 itslef 来应用 css。

例子：

在你的html页面的head标签之间复制下面的代码。

        <style type="text/css">
        .yourclass {
            -moz-box-shadow:inset 0px 1px 0px 0px #fcf8f2;
            -webkit-box-shadow:inset 0px 1px 0px 0px #fcf8f2;
            box-shadow:inset 0px 1px 0px 0px #fcf8f2;
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380) );
            background:-moz-linear-gradient( center top, #fae4bd 5%, #eac380 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae4bd', endColorstr='#eac380');
            background-color:#fae4bd;
            -webkit-border-top-left-radius:0px;
            -moz-border-radius-topleft:0px;
            border-top-left-radius:0px;
            -webkit-border-top-right-radius:0px;
            -moz-border-radius-topright:0px;
            border-top-right-radius:0px;
            -webkit-border-bottom-right-radius:0px;
            -moz-border-radius-bottomright:0px;
            border-bottom-right-radius:0px;
            -webkit-border-bottom-left-radius:0px;
            -moz-border-radius-bottomleft:0px;
            border-bottom-left-radius:0px;
            text-indent:0;
            border:1px solid #eeb44f;
            display:inline-block;
            color:#ffffff;
            font-family:Arial;
            font-size:15px;
            font-weight:bold;
            font-style:normal;
            height:40px;
            line-height:40px;
            width:100px;
            text-decoration:none;
            text-align:center;
            text-shadow:1px -21px 0px #cc9f52;
        }
        .yourclass:hover {
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eac380), color-stop(1, #fae4bd) );
            background:-moz-linear-gradient( center top, #eac380 5%, #fae4bd 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eac380', endColorstr='#fae4bd');
            background-color:#eac380;
        }.yourclass:active {
            position:relative;
            top:1px;
        }

        </style>

body 标签内：

     <input type="submit" class="yourclass" name="mysubmit" value="Submit">

您甚至可以在线创建自己的 - http://www.cssbuttongenerator.com/

【讨论】：

感谢 CSS 按钮生成器非常有用，现在一切正常。非常感谢您的帮助。

【解决方案2】：

使用 CSS：

input[type=submit] {
    background: red;
    color: white;
    border: 0;
    cursor: pointer;
    text-indent: -9999px; /* or any other hide text CSS technique */
}
input[type=submit]:hover {
    background: green;
}

您可以在此处使用大部分 CSS 属性。

【讨论】：