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

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

我想定制按钮，这样我就可以有我自己的按钮，我已经建立自己的代替

我还想要一个翻转效果

我设计的按钮是一个没有文本的空白渐变背景按钮

我很高兴创建一个按钮的变体，上面有提交和重置文本，如果这使生活更轻松，但我想知道如何使用自定义按钮以获得最佳外观

非常感谢您提供的任何帮助。

使用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属性。

您可以使用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>

.你们班{
-moz盒阴影：插入0px 1px 0px 0px#fcf8f2；
-网络工具包盒阴影：插入0px 1px 0px 0px#fcf8f2；
框阴影：插入0px 1px 0px 0px#fcf8f2；
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#fae4bd）、颜色停止（1，#eac380））；
背景：-莫兹线性梯度（中心顶部，#fae4bd 5%，#eac380 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#fae4bd'，endColorstr='#eac380'）；
背景色：#fae4bd；
-webkit边框左上半径：0px；
-左上角moz边界半径：0px；
边框左上半径：0px；
-webkit边框右上角半径：0px；
-moz边框半径右上角：0px；
边框右上角半径：0px；
-webkit边框右下半径：0px；
-moz边框半径右下角：0px；
边框右下半径：0px；
-webkit边框左下半径：0px；
-moz边框半径左下角：0px；
边框左下半径：0px；
文本缩进：0；
边框：1px实心#eeb44f；
显示：内联块；
颜色：#ffffff；
字体系列：Arial；
字体大小：15px；
字体大小：粗体；
字体风格：普通；
高度：40px；
线高：40px；
宽度：100px；
文字装饰：无；
文本对齐：居中；
文本阴影：1px-21px 0px#cc9f52；
}
.你的班级：悬停{
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#eac380）、颜色停止（1，#fae4bd））；
背景：-莫兹线性梯度（中心顶部，#EAC3805%，#fae4bd 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#eac380'，endColorstr='#fae4bd'）；
背景色：#eac380；
}.你的班级：活跃{
位置：相对位置；
顶部：1px；
}

在body标签内：

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

---

您甚至可以在线创建自己的css按钮-

谢谢您css按钮生成器非常有用，现在一切都很好。我真的很感谢你的帮助。