How can I make a button's border look like the image below using CSS? Here's what I've tried - https://jsfiddle.net/rx9sLtjp/10/
This is what I'm trying to achieve:
body{ background: #070707; }.button-style { position: relative; margin: 30px; display: inline-block; padding: 0 20px; height: 40px; line-height: 40px; color: #fff; border: 0; outline: 0; border-radius: 6px; background: #070707 linear-gradient(90deg, rgba(117, 42, 135, 0.5) 0%, rgba(36, 18, 124, 0.5) 100%); &::after { content: ''; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; margin: -1px; border-radius: inherit; background: linear-gradient(90deg, #b415a2 0%, #3116ac 100%); } }
<button class="header__registration button-style">registration</button>
Here is an idea combining clip-path and mask:
.box { display:inline-block; font-size: 40px; padding: 30px 50px; position: relative; clip-path:polygon(0 0,100% 0,100% calc(50% - 18px),calc(100% - 18px) 50%,100% calc(50% + 18px),100% 100%,0 100%,0 calc(50% + 18px),18px 50%,0 calc(50% - 18px)); }.box:before { content:""; position:absolute; inset:0; padding: 4px; border-radius: 20px; background: linear-gradient(90deg, #b415a2, #3116ac); -webkit-mask: conic-gradient(from 45deg at calc(100% - 20px) 50%,#000 90deg,#0000 0) content-box, conic-gradient(from -135deg at 20px 50%,#000 90deg,#0000 0) content-box, linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: add,add,exclude; }
<div class="box"> some text </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.