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):
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...
Solved! Go to the solution
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.
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...
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:
padding: 12px 12px;
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-...
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>