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

Question

I am having problems. The CSS code is identical for these two buttons, but the appearance is completely different. I can't get the :hover or the :active to work either.

I am trying to get the left 'input type="submit' button to look exactly like the 'a href=""' button. Any ideas?

Code example problem at JSFiddle : http://jsfiddle.net/aL6M6/7/

The css is exactly the same for .button-big and for . button-big-submit

Thanks!

    .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

First off, why did you create 2 different styles if they are supposed to be identical?

I put a CSS reset at the beginning and changed the input to button. It's almost identical now, maybe modify the lineheight. Anyway, I helped you half the way http://jsfiddle.net/aL6M6/9/

    border: none;

Answer 2

I added these modifications to your 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);
}

Then, fixed a typo on .button-big-submit:hover and added cursor: pointer;

Updated fiddle: http://jsfiddle.net/aL6M6/12/

Answer 3

i noticed four problems.

1. you need to disable the border. border: none;
2. you have a typo in your ..button-big-sumbit:hover (thats why the hover does not work)
3. your padding in .button-big and .button-big-submit is different.
4. you set some styles for all inputs.

here is a working version: 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);
}