How can I create a button for smartphone that will initiate a phone call?

So i know how to create a button that I can display only up to a certain screen size using @media and display: none. What I'd like to do is have a "Call Us" button on a smart phone that, when pressed, initiates a call. I would then not display it for non-smartphone devices.

I know how to do this for a phone number in a code block, and I'm doing that on my Contacts page. I'm also using the mobile information bar, which is nice but disappears, and I'd like to do this as well. The only options in the button block are content, files and external. Any ideas how to hack around that?

Thanks!

Actually I found information & came up with solutions of my own to make this work: to have a "Call Us" button appear only for screen sizes that match mobile phone sizes (in particular iPhone 6+ pixel width and below) which I wanted to disappear above those sizes to be replaced by a Contact Us button linked to my contact page for larger devices. Obviously, this is so that people on tablets and computers don't use the Call Us button.

It's pretty cool stuff so I thought I would share it.

The first challenge was to target each button separately in order to use a display:none with a media query for each (you can look that up if you don't know what it is). That way I could use display:none for the Contact Us button below, say, 736px, and a display:none for the Call Us button at 737px and above.

The only way I found to be able to target the two blocks separately (this is very difficult to do in Squarespace because block-specific div ID's change dynamically), was to use a unique block type for each. I used a code block to create a Call Us button, and a "Large" button for the Contact Us button (Adirondack gives you three button sizes, and I wasn't using the large for anything, so I used that). Then I did an "inspect element," found the block specific css to target, and went from there. I put the custom css in the Header Injection section of the individual page. For this to work, nothing else on the page can be of either type, unless you want to target them as well. (The actual css that I used is toward the bottom of this posting).

To create a button that fully matches the button style for the site using the code block, I direct you to this great article by Johnny Gennick: http://gennick.com/database/centering-squarespace-buttons. It's very cool. He wrote it to help in situations where you want to exactly center two buttons but the template doesn't quite center them because they are different sizes. He demonstrates how to use a code block to create two buttons side by side.

The change I made to his code was to make my Call Us button actually lead to a call from the cell phone, instead of linking to another page. The part of his code that I modified was:

a href="http://twentynineinches.com/" class="sqs-block-button-element--medium sqs-block-button-element" >Go 29er

Which I replaced with:

a style="margin: 4em;" href=tel:+15551234123class="sqs-block-button-element--small sqs-block-button-element">CALL US

[i just left out the opening "<" and closing tag for each of the above so that they wouldn't appear as actual links]

The CSS in the header injection area of the page that I used to control the buttons appearing and disappearing (and it may be different for other templates, I'm not sure) was:

@media only screen and (max-width: 737px) {.large-button-style-outline .sqs-block-button .sqs-block-button-element--large, .large-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--large { display: none;}}

@media only screen and (min-width: 738px) {.sqs-block-code .sqs-block-content { display: none;}}

The first targets the "large" button that Adirondack offers, and the second targets the code block (and the button created by it, as per Gennick's article). Summary: the first one turns off the Contact Us Button until 737px width, and the second one turns off the Call Us button at 738px and above.

I hope that makes sense and is useful for others. If anyone wants to see the result, you can visit my home page and resize the browser to see the effect: www.faberproductions.com.

You can create a phone link within your site by way of an external link within any place in Squarespace that allows for links such as Image Blocks, Gallery Blocks, Clickthrough Url's, Button Blocks, or Text links.

Squarespace's guide on how to create these is here:

https://support.squarespace.com/hc/en-us/articles/206232858-Adding-links-to-your-site#toc-external-tab---link-to-an-external-page

All you need to do is format the link like so:

tel:5555555555