html - CSS customization of 'Submit' button vs. <a href=""></a> button -

i having problems. css code identical these 2 buttons, appearance different. can't :hover or :active work either.

i trying left 'input type="submit' button 'a href=""' button. ideas?

code example problem @ jsfiddle : http://jsfiddle.net/al6m6/7/

the css same .button-big , .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); } 

i noticed 4 problems.

1. you need disable border. border: none;
2. you have typo in ..button-big-sumbit:hover (thats why hover not work)
3. your padding in .button-big , .button-big-submit different.
4. you set styles inputs.

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