CODEWITHSUNDEEP
cssbutton
Suthan Bala
Suthan Bala

Reputation: 3299

How can I create this button in CSS3?

So far I've got the following html and CSS. I'm stuck on how to achieve the bottom right style with CSS. Any help is appreciated. Thanks

HTML

<a href="#" class="btn">Size Chart</a>

CSS

.btn{
    background: rgba(0,167,253,0.5);
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #0093df;
}

JSFiddle

CSS Button

Upvotes: 2

Views: 91

Answers (2)

Optox
Optox

Reputation: 620

Here's my solution using css gradients: HTML:

<span class="btn-outline"><a href="#" class="btn">Size Chart</a></span>

CSS:

.btn{
    background: rgba(0,167,253,1);
    background: linear-gradient(135deg, transparent 5px, #B2E4FE 5px);
    background: -o-linear-gradient(135deg, transparent 5px, #B2E4FE 5px);
    background: -moz-linear-gradient(135deg, transparent 5px, #B2E4FE 5px);
    background: -webkit-linear-gradient(135deg, transparent 5px, #B2E4FE 5px);
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
    padding: 5px 10px;
}
.btn-outline{
    background: #0093df;
    padding: 1px;
    background: -webkit-linear-gradient(135deg, transparent 5px,#0093df 5px);
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
     display: inline-block;
}

Fiddle

Upvotes: 3

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18133

I might found a solution for you, using both :before and :after:

.btn{
    background: rgba(0,167,253,0.5);
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #0093df;
    position: relative;
}
.btn:after, .btn:before {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0;
    height: 0;
    border: 4px solid white;
    border-color: transparent white white transparent;
    z-index: 2;
}
.btn:before {
    border: 5px solid #0093df;
    border-color: transparent #0093df #0093df transparent;
    z-index: 1;
}

DEMO.

Please note that it uses a white background, so if your background hasn't a unicolor, it might not function.

Upvotes: 2

Related Questions