Html Button that looks like Buy-Button and links to url

[justink]

Hi,
I'm creating my store and want to add a simple html button that will link to one of my free uploaded .pdf files.

I tried a google search and got a button that looks pretty good on my desktop and my chromebook, but it looks awful on my iphone (see attached). The button is green and says "Section 16 - Free Notes"

Isn't there a way to just put some simple html into the <> editor on the page in question? (I don't know css):
https://collegechemistrynotes.com/pages/section16-spontaneity-entropy-and-free-energy

See two pics attached: one shows how it looks fine on my chromebook, and the other shows how it looks like crap on my iphone

Too bad we can't use Shopify's "buy-button" app to generate a button that links to other things besides a PRODUCT, smh...

looks good on chromebook

looks crap on mobile (iphone)

[Ninthony]

That's an unusual problem. When I inspect this on mobile, it looks perfectly fine. I have no idea why it would be appearing different on an iPhone.  I also checked it on my android and it appears just as it does on desktop.

[justink]

It looks fine on PC's and also on a Mac desktop, but iphone and ipad, it looks like crap.  Anybody know why?  OR, how about anybody knowing a simpler alternative html code to enter than this, which is what I have now?:

<form><input style="padding: 12px; cursor: pointer; font-weight: regular; border: 0px; background: #78b657; color: #ffffff; border-radius: 15px; font-size: 100%;" type="button" value="Section 16 Notes - Free Pages" onclick="window.location.href='https://cdn.shopify.com/s/files/1/0088/5977/9152/files/section16-spontaneity-entropy-and-free-energy...';" /></form>

Any help would save me a lot of googling, lol... And if you have step-by-step instructions, I might be able to follow a CSS or theme.liquid (??) instruction too.  Right now, I've just embedded directly into the specific page's <> html editor...

[justink]

Almost figured it out!!  This is what i have embedded into the html:

<button class="button">Section 14 - Free Notes</button>

----
And this is what I learned to do with CSS!! --> in page.liquid I entered the following:

<style>
.button {
background-color: #78b657;
border: none;
color: white;
border-radius: 15px;
padding: 12px 12px;
text-align: center;
font-size: 16px;
font-family: helvetica;
cursor: pointer;
}

.button:hover {
background-color: #5f9d3e;
}
</style>

------

My super easy question at this point -- how to make this button: <button class="button">Section 14 - Free Notes</button>

link to this: https://cdn.shopify.com/s/files/1/0088/5977/9152/files/section18-transition-metals-and-coordination-...

Any help?...

[Ninthony · Accepted solution]

Just wrap an anchor around it:

<a href="https://cdn.shopify.com/s/files/1/0088/5977/9152/files/section18-transition-metals-and-coordination-chemistry.pdf?182" target="_blank">
  <button class="button">Section 14 - Free Notes</button>
</a>

[finderirene]

I played with the HTML for this a bit, and came up with this. You should be able to insert this simple html into any page on Shopify, without having to edit the templates or sections. Edit the INTRO TEXT, link for the button, BUTTON CLASS number (to change the corner style of the button), and BUTTON TEXT accordingly:

<p style="text-align: center;">TYPE YOUR INTRO TEXT HERE</p>
<style><!--
.button {
background-color: #F15024;
border: none;
color: white;
padding: 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button0 {border-radius: 0px;}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
--></style>
<div style="text-align: center;"><a href="https://google.com" target="_blank" rel="noopener noreferrer"><button class="button button2">INSERT BUTTON TEXT</button></a></div>

[chusmeatmarket]

Hello This code is very helpful. Are you able to share how to change the font within the button?

[finderirene]

I'm sorry, but I don't.