CODEWITHSUNDEEP
htmlcss
TJBro
TJBro

Reputation: 17

How to create a button with slided corners?

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.

Upvotes: 0

Views: 70

Answers (4)

zer00ne
zer00ne

Reputation: 44088

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>

Upvotes: 0

Siu Pang Tommy Choi
Siu Pang Tommy Choi

Reputation: 475

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.

Upvotes: 0

Madhan S
Madhan S

Reputation: 693

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

Upvotes: 1

Joel
Joel

Reputation: 1239

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>

Upvotes: 3

Related Questions