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>