CODEWITHSUNDEEP
csspseudo-class
Patrick Dahm
Patrick Dahm

Reputation: 73

CSS Button with different shape before and after

Button example

I tried to code the example above, but I can't still don't get it. It works with a certain length, but when the length changes (because of the content inside) it breaks and I have to manually configure the padding-bottom.

Here an example:

enter image description here

And here's my code:

.tjbtn, .tjbtn--orange, .tjbtn--green {
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    padding: 1em;
    line-height: 3em;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-image: url("http://tj.cadman.ws/button_bg_orange.svg");
}

Is there any possibility to code this without an attached background-image and make this fluid regardless to the width?

Thanks in advance!

Upvotes: 2

Views: 82

Answers (1)

ketan
ketan

Reputation: 19341

Give display: inline-block; and change to background-size: 100%; will work for you.

.tjbtn, .tjbtn--orange, .tjbtn--green {
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    padding: 1em;
    line-height: 3em;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-image: url("http://tj.cadman.ws/button_bg_orange.svg");
    display: inline-block;
}

Fiddle

Upvotes: 2

Related Questions