CODEWITHSUNDEEP
htmlcss
The Mechanic
The Mechanic

Reputation: 2329

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">
    <span>Submit</span>
</button>

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

Upvotes: 4

Views: 94

Answers (2)

wm.p1us
wm.p1us

Reputation: 2059

delete

   transparent -moz-use-text-color

from the line

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

I dont see any changes, but works fine. Result is:

  border-color: #357536;

Upvotes: 2

Daniel Imms
Daniel Imms

Reputation: 50189

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

jsFiddle

border-color: #357536;

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

Upvotes: 5

Related Questions