What happens with this CSS3? I can not find him

Question

I made a button with some effects. When I tested in the browser, it worked fine only in Mozilla. I can’t find why -webkit doesn’t work in the browser, can someone tell me why this code doesn’t work, check this script http://jsfiddle.net/sarfarazdesigner/Qtw3x/

here is the html code

<button name="feat-btn" id="feat-btn" class="push-button" type="submit"> <span>Submit</span> </button> 

here css

 .push-button { background: none repeat scroll 0 0 transparent; border: medium none; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 18px; padding: 0; text-align: center; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .push-button span:after { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #357536 transparent -moz-use-text-color; border-image: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-style: solid solid none; border-width: 5px 5px 0; content: ""; display: block; margin: 0 -1.7em; overflow: hidden; text-indent: -9999px; } .push-button span:before { border-radius: 8px 8px 8px 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); content: "."; display: block; height: 55px; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .push-button span { background-color: #4FB051; border-bottom: 1px solid #6FBE70; display: inline-block; height: 49px; line-height: 50px; margin-bottom: 5px; min-width: 110px; padding: 0 1.7em; position: relative; } .push-button:hover span{background-color:#52a853;} 

first check it in mozilla , then you will understand how it will look, or you can see the image below it looks in mozilla

and it looks in the webkit browser.

Answer 1

Something strange is happening with your border-color in the .push-button span:after selector

 border-color: #357536 transparent -moz-use-text-color; 

Just change it to #357537

jsFiddle

 border-color: #357536; 

Works in both Chrome and Firefox for me with these changes.

Answer 2

remove

  transparent -moz-use-text-color 

from line

  border-color: #357536 transparent -moz-use-text-color; 

I do not see any changes, but it works fine. Result:

  border-color: #357536;