Jump to content

How to add bevel/angles to corners of buttons

Recommended Posts

I'm wanting to add a bevel/angle to the bottom left and top right corners of all buttons across a client's website (not in build yet). Some button would be a fill colour and some outlined.

I've been testing on a page on my own website but can't make it work. Does anyone have any thoughts?

Screenshot 2024-05-04 at 7.47.55 pm.png

Link to comment
  • Replies 3
  • Views 318
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Try this code (for header button)

a.btn:after {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    left: -15px;
    bottom: -18px;
    background-color: #fff;
    transform: rotate(45deg);
    border-top: 2px solid #d60505;
}
a.btn:before {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    right: -15px;
    top: -18px;
    background-color: #fff;
    transform: rotate(-135deg);
    border-top: 2px solid #d60505;
}
a.btn {
    position: relative;
}

image.png.828a8070fbbe3902edd80d3797aea6e1.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.