Solution 1 :

You can inspect how do they did that directly on their website

button {
  /* the trick */
  clip-path: polygon(8px 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 8px,8px 0%);

  /* some style to see it */
  border: none;
  background-color: green;
  color: white;
  font-size: 16px;
  line-height: 1.4;
  padding: .5ch 1ch;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

Solution 2 :

You can use border-radius CSS property to make the border design.

<button>See all features</button>
button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 20px;
  border-radius: 15px 3px;

Solution 3 :

Just view source and check how they have done that.
No fancy magic, they use a png background image:

The button <a> is divided into 3 parts, a pseudo-element ::before, a <span> holding the text, followed by a pseudo-element ::after.

::before displays the background image.

<span> has the usual background green color. This structure gives you flexibility so the background image is unaffected by varying texts.

::after displays the same background image, but turns it 180 degrees.

Solution 4 :

This is is from the source of a link obtained by using DevTools. Read the following:

  • Firefox Developer Tools
  • Chrome DevTools
  • Edge DevTools
    @import url('');
    a {
      display: inline-block;
      padding: .5em 1.2em;
      border: 0;
      outline: 0;
      font-family: "Titillium Web", sans-serif;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.628571429;
      text-decoration: none;
      letter-spacing: .02em;
      box-sizing: inherit;
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      text-align: center;
      color: #fff;
      background: #41cd52;
      clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px, 8px 0%);
      transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
      transform: scale3d(1.00001, 1.00001, 1.00001);
      cursor: pointer;
    a::selection {
      background: #41cd52;
      color: #fff;
    <a href='#'>See all features</a>

Problem :

How can I create a button like this one I saw on Qt website?
Green button with a cool edge
The green button with edges.
I don’t want any library or anything. The answer is appreciated in plain HTML and CSS only.
Any way to implement this?
Thanks in advance 🙂

I tried methods like border-radius:value; but it doesn’t seem to work.


Comment posted by Dai

Best approach would be an SVG image, otherwise an image-border.

Comment posted by TJBro

Great approach but not quite the way I wanted. You see the corners are rounded. Thanks for effort.