I'm trying to mare a button whith an irregular shape similar to this using only CSS Somebody have any clue?

enter image description here

  • 1
    You could embed an SVG into the CSS. – DA01 Sep 28 '16 at 20:34
  • Link embedding inside SVG; image map; SVG with pseudo-element; just live with a little live clickable area outside the button image. – Yorik Sep 28 '16 at 20:56
  • You could get something close in just CSS using border-radius, but given your lack of effort into a good question that's as much as I will help you – Zach Saucier Sep 29 '16 at 2:53

You can play with the border-radius property to get some odd shapes...

enter image description here

button {
    background: #a00;
    color: #fff;
    border: 2px solid #a33;
    padding: 20px 50px;
    margin: 20px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 3px 5px #aaa;

    /* where the magic happens */
    border-radius: 40% 60% 30% 50%;



If you need that specific shape, you'll have to work out the percentage of radius for each corner to get close.

  • That's awesome! exactly what I need! thanks guys! – m. Hebert Sep 30 '16 at 13:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.