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

Question

我遇到了问题。这两个按钮的 CSS 代码相同，但外观完全不同。我也无法让 :hover 或 :active 工作。

我正在尝试让左侧的“input type="submit' 按钮看起来与 'a href=""' 按钮完全一样。有什么想法吗？

JSFiddle 的代码示例问题：http://jsfiddle.net/aL6M6/7/

.button-big 和 .button-big-submit

的 css 完全相同

谢谢！

    .button-big
{
    display: inline-block;
    background: #ed391b;
    color: #fff;
    text-decoration: none;
    font-size: 1.75em;
    font-weight: 300;
    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);
}

Answer 1

首先，如果它们应该是相同的，你为什么要创建两种不同的样式？

我在开头放置了一个 CSS 重置并将输入更改为按钮。现在几乎一样了，也许修改lineheight。 反正我帮了你一半http://jsfiddle.net/aL6M6/9/

    border: none;

Answer 2

我注意到四个问题。

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

这是一个工作版本：fiddle

@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);
}

Answer 3

我将这些修改添加到您的 CSS

.button-big-submit {
    display: inline-block;
    background: #ed391b;
    color: #fff;
    text-decoration: none;
    font-size: 1.75em;
    line-height: normal;
    font-weight: 300;
    padding: 5px 15px 5px 15px;
    outline: 0;
    border: 0;  /* here */
    padding: 10px 40px; /*here*/
    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-submit:hover 的错字并添加cursor: pointer;

更新小提琴： http://jsfiddle.net/aL6M6/12/