Jump to content

Button not centred

Recommended Posts

Site URL: https://tracytredoux.com/programmes/2-week-winter-detox-2023

Hi all,

I have created a button for a sales page and centred it with the position:relative, left:50%, but for some reason it is aligning right of centre.

Also, the text is appearing at the bottom of the button, rather than vertically centred. Strangely, this happens in all the instances except the one at the very bottom of the page, where the text is in the vertical centre. I have used a styled link, rather than a button as I read somewhere that buttons shouldn't be used to link to other pages but i'm not sure if this is correct.

Most buttons look like this:

image.thumb.png.59732176f3ef50f564c1c6007ced2ba9.png

 

Button at the bottom of page looks like this:

image.thumb.png.9c839e864ec9ba507cbca2a59ca4cfb7.png

 

And here is my code:

.signup{
 -webkit-transition: all 400ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 200ms ease-in-out;
  padding: 15px 25px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  tex-decoration:none !important;
  outline: none !important;
  color: white  !important;
  background-color: #c4e5c0;
  border: none;
  border-radius: 25px;
  box-shadow: 0 2px #999;
  max-width:max-content;
  position:relative;
  left:50% ;
  
}
a:link{
	text-decoration:none !important
    }
    
.signup:after{
	content:"Sign Up"; 
    }
    
.signup:hover{
    -webkit-transition: all 600ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 600ms ease-in-out;
  box-shadow: 0 4px #999;color:#7c7c7b !important;
  color:#7c7c7b;
  }

.signup:active {
  color: #7c7c7b;
  box-shadow: 0 4px #999;
  transform: translateY(4px);
}
</style>

<a class="signup" href="https://secure.squarespace.com/checkout?cartToken=cCgtbiu3iuL1bhb92cLZ5lfk-RahxlBtwd5QeSw9&websiteId=58762023893fc0d94810ba05"></a> 

Many thanks in advance!

Link to comment
2 hours ago, Phobic78 said:

Thanks @Web_Solutions, that does help put the text in the right place, but the button itself is still off to the right of centre.

I have updated your code.  Please replace these code and let me know if it work.

.SignupDiv{
  display: block;
  text-align: center;
}
.signup{
 -webkit-transition: all 400ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 200ms ease-in-out;
  padding: 15px 25px !important;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  tex-decoration:none !important;
  outline: none !important;
  color: white  !important;
  background-color: #c4e5c0;
  border: none;
  border-radius: 25px;
  box-shadow: 0 2px #999;
  max-width:max-content;
  position:relative;
}
a:link{
	text-decoration:none !important
    }
    
.signup:after{
	content:"Sign Up"; 
    }
    
.signup:hover{
    -webkit-transition: all 600ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 600ms ease-in-out;
  box-shadow: 0 4px #999;color:#7c7c7b !important;
  color:#7c7c7b;
  }

.signup:active {
  color: #7c7c7b;
  box-shadow: 0 4px #999;
  transform: translateY(4px);
}

<div class="SignupDiv"><a class="signup" href="https://secure.squarespace.com/checkout?cartToken=cCgtbiu3iuL1bhb92cLZ5lfk-RahxlBtwd5QeSw9&websiteId=58762023893fc0d94810ba05"></a></div>

 

Link to comment
23 hours ago, Phobic78 said:

I have created a button for a sales page and centred it

The code in this thread won't work as intended. This is because the the link you are using (mentioning a cartToken) is unique and as soon as the item is removed from the checkout, it will fail to work. 

A much simpler solution is to add a Product Block to the page, as this won't require code. If you link the Product Block to the product that you want sell, and toggle all options off except the button, it should achieve the result that you want.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 9/23/2022 at 5:10 PM, Web_Solutions said:

I have updated your code.  Please replace these code and let me know if it work.

.SignupDiv{
  display: block;
  text-align: center;
}
.signup{
 -webkit-transition: all 400ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 200ms ease-in-out;
  padding: 15px 25px !important;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  tex-decoration:none !important;
  outline: none !important;
  color: white  !important;
  background-color: #c4e5c0;
  border: none;
  border-radius: 25px;
  box-shadow: 0 2px #999;
  max-width:max-content;
  position:relative;
}
a:link{
	text-decoration:none !important
    }
    
.signup:after{
	content:"Sign Up"; 
    }
    
.signup:hover{
    -webkit-transition: all 600ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 600ms ease-in-out;
  box-shadow: 0 4px #999;color:#7c7c7b !important;
  color:#7c7c7b;
  }

.signup:active {
  color: #7c7c7b;
  box-shadow: 0 4px #999;
  transform: translateY(4px);
}

<div class="SignupDiv"><a class="signup" href="https://secure.squarespace.com/checkout?cartToken=cCgtbiu3iuL1bhb92cLZ5lfk-RahxlBtwd5QeSw9&websiteId=58762023893fc0d94810ba05"></a></div>

 

Thank you, @Web_Solutions. defining a div class worked. It sounds like the link to the product isn't going to work, which is a shame, but i greatly appreciate the coding lesson!

Link to comment
On 9/24/2022 at 12:41 PM, paul2009 said:

The code in this thread won't work as intended. This is because the the link you are using (mentioning a cartToken) is unique and as soon as the item is removed from the checkout, it will fail to work. 

A much simpler solution is to add a Product Block to the page, as this won't require code. If you link the Product Block to the product that you want sell, and toggle all options off except the button, it should achieve the result that you want.

Thank you for this head up, @paul2009. I will use the product block. Is it possible for me to customise the button so that it isn't just a black rectangle? The button I have created is ideal but as you point out, it isn't going to link to the product as intended.

Link to comment
33 minutes ago, Phobic78 said:

I will use the product block. Is it possible for me to customise the button so that it isn't just a black rectangle?

Yes. You can use CSS to do this, as you did in your original post above, except that you'll use the classes of the Product Block's button instead of your ".signup" class. For example, to change the background colour you might use something like this:

.product-block .sqs-add-to-cart-button.sqs-button-element--primary {
  background-color: #c4e5c0!important;
}

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 9/26/2022 at 1:48 PM, paul2009 said:

Yes. You can use CSS to do this, as you did in your original post above, except that you'll use the classes of the Product Block's button instead of your ".signup" class. For example, to change the background colour you might use something like this:

.product-block .sqs-add-to-cart-button.sqs-button-element--primary {
  background-color: #c4e5c0!important;
}

 

Yes, this works exactly as intended now, thanks a lot!

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.