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. 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>