Logo Questions Linux Laravel Mysql Ubuntu Git Menu

what happening with this CSS3? i can't find it




i have made a button with some effects. When i tested in browser it's working fine in only in mozilla. i am unable to find why is not working in -webkit- browser can anybody tell me why this code is not working check this fiddle http://jsfiddle.net/sarfarazdesigner/Qtw3x/

here is html code

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

here is 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 understand how it will look or you can see the image below this is looking in mozilla enter image description here

and this is looking in webkit browser enter image description here

like image 546
The Mechanic Avatar asked Mar 25 '23 08:03

The Mechanic

1 Answers

Something weird is going on with your border-color in the .push-button span:after selector

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

Just change it to #357537


border-color: #357536;

Works in both Chrome and Firefox for me with that change.

like image 61
Daniel Imms Avatar answered Apr 01 '23 12:04

Daniel Imms