HTML to turn my hyperlink into a button

Solved
Highlighted
Tourist
3 1 0

Hi everyone,

Can anyone help me, please? 

I'm not super tech savvy, so I'm looking for some sort of step by step to turn a hyperlink on one of my shops pages, into a simple looking button (colour background, maybe rounded corners). I'm feeling pretty overwhelmed by CSS, but can get my head round html coding... any help would be amazing. Basically, I want to make my "links" page look a bit smarter: my links page

Halp! Thanks so much,

Marc

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 62 129

This is an accepted solution.

Hey, @MarcoLooks 

There's a really great online tool Best CSS Button Generator that allows you to design your own button and it provides you with the HTML code. For example, here is some code for a button that I was able to generate through their website:

 

<a href="#" class="myButton">green</a>

.myButton {
	background-color:#4584c7;
	border-radius:28px;
	border:1px solid #30567d;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f5173;
}
.myButton:hover {
	background-color:#4584c7;
}
.myButton:active {
	position:relative;
	top:1px;
}

 

Alternatively, you can use another button generator tool such as Da Button Factory where you can design the button to your liking. From there, you simply right-click on the generated button and save it as an image. From there, you can add the button image(s) to your Shopify page with a URL redirect attached to it.

I hope this helps! If there is anything else I can help you with, please let me know.

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
3 1 0

Hi Dirk,

Thanks so much for your help. The first solution didn't seem to work (??) I added the HTML to my page within the "show HTML" section.

So went to the Da Button factory, added the code using HTML+CSS - it seems to work well, but I have no idea where to add the hyperlink that I want the button going to...using this, do you know where I might add my link, please?

 

<div class="my-cta-button">christmas shop now OPEN</div>
<style><!--
.my-cta-button{
background: #10779a;
border-radius: 11px;
padding: 20px 45px;
color: #ffffff;
display: inline-block;
font: normal bold 26px/1 "Caviar", sans-serif;
text-align: center;
}
--></style>

 

Thanks for your help so far

0 Likes
Highlighted
Tourist
3 1 0

This is an accepted solution.

Hey Dirk 

I've been able to work out - thanks for all your help

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 62 129

Hey, @MarcoLooks 

Glad you were able to figure out how to attach a link to an image. For anyone else following this thread, we have a guide here that shows you step-by-step how to upload an image that links to a web page. 

If there is anything else I can help you with, please let me know.

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes