CODEWITHSUNDEEP
css
Alex
Alex

Reputation: 241

Arrow button with smooth rounded corners

I want to create a 'next button' where the right corner is an arrow and the corners are rounded smoothly.

How can I create an arrow button with smooth rounded corners like in this picture (and make all these effects)?

enter image description here

Here is my attempt (JSFiddle):

.arrow_btn {
    position: relative;
    background: #fa963e;
    border: 3px solid #f5a742;
    border-radius: 5px; 
}
.arrow_btn:after{
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border-radius: 5px;    
}
.arrow_btn:after {
    border-color: rgba(250, 150, 62, 0);
    border-left-color: #fa963e;
    border-width: 14px;
    margin-top: -14px;
    border-radius: 5px;    
}

It looks like this:

enter image description here

Upvotes: 1

Views: 2883

Answers (1)

Spudley
Spudley

Reputation: 168715

This sort of thing really ought to be done with SVG, not CSS.

CSS is great at what it's designed for -- page layout. It sucks when you start trying to use it to draw graphics. It can do basic stuff fairly easily and that makes people think it can do anything... well, yes, it can, but it gets ugly pretty quickly.

SVG is explicitly designed for drawing graphics, and is very good at it. It can be embedded directly into your page or as a separate file like any other image. It's scalable and can be manipulated and animated via javascript... and it's dead easy to use.

Upvotes: 1

Related Questions