CSS的“提交”按钮与<a href=""> </a>按钮的自定义

我注意到四个问题。

1. 您需要禁用边框。边界：无；
2. 您在..button-big-sumbit：hover中有一个错字（这就是为什么悬停不起作用的原因）
3. 您在.button-big和.button-big-submit中的填充是不同的。
4. 您可以为所有输入设置一些样式。

这是一个工作版本：小提琴

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200);

body {
    /*background: #D4D9DD url('images/bg03.jpg');*/
    background: #31393c url('images/bg04.jpg');
}

body, input, textarea, select {
    color: #373f42;
    font-size: 1.125em;
    font-family: 'Yanone Kaffeesatz', Tahoma, Arial, Sans-serif;
    /*      font-family: 'yanone_kaffeesatzlight';
    */
    line-height: 1.85em;
    font-weight: 300;
}

.button-big {
    cursor: pointer;
    display: inline-block;
    background: #ed391b;
    color: #fff;
    text-decoration: none;
    font-size: 1.75em;
    font-weight: 300;
    line-height : 1em;
    font-family: inherit;
    border: none;
    padding: 15px 45px 15px 45px;
    outline: 0;
    border-radius: 10px;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    background-image: -moz-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -webkit-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed391b), to(#ce1a00));
    background-image: -ms-linear-gradient(top, #ed391b, #ce1a00);
    background-image: -o-linear-gradient(top, #ed391b, #ce1a00);
    background-image: linear-gradient(top, #ed391b, #ce1a00);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

.button-big:hover {
    background: #fd492b;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    background-image: -moz-linear-gradient(top, #fd492b, #de2a10);
    background-image: -webkit-linear-gradient(top, #fd492b, #de2a10);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd492b), to(#de2a10));
    background-image: -ms-linear-gradient(top, #fd492b, #de2a10);
    background-image: -o-linear-gradient(top, #fd492b, #de2a10);
    background-image: linear-gradient(top, #fd492b, #de2a10);
    text-decoration: none;
}

.button-big:active {
    background: #ce1a00;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    background-image: -moz-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -webkit-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ce1a00), to(#ed391b));
    background-image: -ms-linear-gradient(top, #ce1a00, #ed391b);
    background-image: -o-linear-gradient(top, #ce1a00, #ed391b);
    background-image: linear-gradient(top, #ce1a00, #ed391b);
}