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;
}

<button>exemple</button>

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;
}

Just view source and check how they have done that.
No fancy magic, they use a png background image: https://149513.fs1.hubspotusercontent-na1.net/hubfs/149513/Qt2017/greencorner-top-left.png

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.

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('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
  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>

How can I create a button like this one I saw on Qt website?

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.