Jump to content

Pricing Table Button Shape

Recommended Posts

Site URL: https://pineapple-octahedron-tdp7.squarespace.com/

I've purchased code for a pricing table for a client's website. I'm needing help with the button on the table. I want to make it like the rest of the website (leaflet shape button). 

I know it's something along the lines of border-radius: 30% 0 30% 0 but I'm not sure where to put it in this line of code (see attachment) or how to target it.

 &__button {
    .transition(all .1s ease);
    border: 1px solid @pricing-table-1__button--primary-color;
    color: @pricing-table-1__button--primary-color;
    display: inline-block;
    font-size: @pricing-table-1__button--font-size;
    font-weight: @pricing-table-1__button--font-weight;
    letter-spacing: @pricing-table-1__button--letter-spacing;
    padding: 11px 24px;
    text-transform: uppercase;


Website: https://pineapple-octahedron-tdp7.squarespace.com/

Password: kathleen 

Any help is appreciated. Thank you! 

Screen Shot 2022-03-17 at 4.13.42 PM.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

It looks like you solved with this code?

.pricing-table-1__button {
    border-radius: 16px 0px 16px 0;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
    border: 1px solid #26262a;
    color: #fff;
    background-color: #2b2a29;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 11px 24px;
    text-transform: uppercase;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.