CatCat Posted June 20 Share Posted June 20 (edited) Hi! I'm wanting to create notched buttons like the button below. I found one other thread about this, but I'm having trouble getting it to work correctly. I've had success with the below code showing correctly, but can't get the percentages right to make my desired shape: .sqs-block-button-element { div { position: relative; width: 200px; height: 80px; overflow: hidden; background-color: #522d5b; clip-path: polygon( 0 20%, 10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0% 80% ) } Thank you VERY much! Edited June 20 by CatCat additional info Link to comment
tuanphan Posted June 22 Share Posted June 22 Can you share site url? We can test that code easier. CatCat 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CatCat Posted June 22 Author Share Posted June 22 @tuanphan Thank you for asking/helping! https://tiger-scarlet-kmc6.squarespace.com Link to comment
Solution tuanphan Posted June 25 Solution Share Posted June 25 Use some code like this div.button-block a { position: relative; width: 200px; height: 80px; overflow: hidden; background-color: #522d5b !important; clip-path: polygon( 0 20%, 10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0% 80% ) !important; color: #fff !important; border-radius: unset !important; display: flex; align-items: center; justify-content: center; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment