Button not centred

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:

Button at the bottom of page looks like this:

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!

Just put here important like. See images

padding: 15px 25px !important;

26 minutes ago, Web_Solutions said:

Just put here important like. See images

padding: 15px 25px !important;

 

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.

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>

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.

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!

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.

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;
}

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!