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

Solved
Highlighted
Excursionist
27 1 10

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 chromebooklooks good on chromebook

looks crap on mobile (iphone)looks crap on mobile (iphone)

0 Likes
Highlighted
Shopify Partner
1445 195 521

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.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Excursionist
27 1 10

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...

0 Likes
Highlighted
Excursionist
27 1 10

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?...

0 Likes
Highlighted
Shopify Partner
1445 195 521

This is an 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>
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like