How can I correctly place a link in HTML button code and adjust button text position?

Store Design
1

I have created a button to link to our online rental software. The button can be seen here:

https://shop.skitakhut.com/pages/rentals

Code is:

.blockBtn { display: block; width: 100%; border: rgb (0,0,0); background-color: rgb(0, 0, 0); color: white; padding: 25px 36px; font-size: 25px; cursor: pointer; text-align: center; font-weight: bold; border-radius: 12px; href=“[https://Skitakhut.rentrax.io](https://Skitakhut.rentrax.io)"; }

.blockBtn:hover {
background-color: rgb(255, 255, 255);
color: black;
}

<h1 style="text-align: center;"; Book Your Rentals Now

2 questions with this:

1/ It seems where I have the link in the code is not correct - where should the line for the link be?

2/ I am working on changing to a new theme (Beyond). When I preview the rental page in Beyond the text in the button is shown lower then I would like. Is there a way to correct this?

(https://3npdym155fwk1925-5106301.shopifypreview.com/pages/rentals) I also notice that the button does not change colour when I hover over it. Could this be because I have not bought the theme yet?

2

hii, @Shop_Ski_Tak_Hu
paste this code on top of the theme–critical.css file.

button.blockBtn {
    padding-top: 1px !important;
}

Thank You.

3

Hi @Shop_Ski_Tak_Hu ,

#1: You can change the code:

Book Your Rentals Now => <a class=“blockBtn” href=“https://Skitakhut.rentrax.io" target=“_blank”>Book Your Rentals Now

#2: Change the CSS code:

.blockBtn {
display: block;
height: auto;
width: 100%;
border: rgb (0,0,0);
background-color: rgb(0, 0, 0);
color: white;
padding: 25px 36px;
font-size: 25px;
cursor: pointer;
text-align: center;
font-weight: bold;
border-radius: 12px;
}

Hope these help!

If you find my answer helpful for you, please mark it as a solution. Thank you and good luck.

4

Great - thanks. I was able to work with that code and got it to work

(https://shop.skitakhut.com/pages/rentals)

It works with that theme currently - but not my potential new theme. Is that because I have not purchased the theme yet? Or is it possible it wont work with the theme I am hoping to use?

5

You are referring to new theme: Beyond with link: https://3npdym155fwk1925-5106301.shopifypreview.com/pages/rentals

I checked and the css code you entered is not correct, you just need to edit it, everything will work fine. https://i.imgur.com/70krffu.png

Change the code as below:

.blockBtn {
display: block;
width: 100%;
border: rgb (0,0,0);
background-color: rgb(0, 0, 0) !important;
color: white !important;
text-decoration: none !important;
padding: 25px 36px;
font-size: 25px;
cursor: pointer;
text-align: center;
font-weight: bold;
border-radius: 12px;
}
.blockBtn {
display: block;
width: 100%;
border: rgb (0,0,0);
background-color: rgb(0, 0, 0);
color: white;
padding: 25px 36px;
font-size: 25px;
cursor: pointer;
text-align: center;
font-weight: bold;
border-radius: 12px;
}

.blockBtn:hover {
background-color: rgb(255, 255, 255);
color: black;
}

Hope this helps

If you find my answer helpful, please mark it as a solution. Thank you so much

6

Thanks - couldn’t figure out why it worked fine in one theme and not the other.