Home > Enterprise >  How to create a button with slided corners?
How to create a button with slided corners?

Time:03-26

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

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

CodePudding user response:

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>

CodePudding user response:

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

CodePudding user response:

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.

CodePudding user response:

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>
  • Related