Everyone has an app that they discovered when browsing a website from their phone, but how do they always know what button to show you to take you to your application store? Well, it’s very easy actually! Let’s explain!

First thing we have to do is define the browsers of these common devices, and we’ll be using JavaScript for that!

var isMobile = {
 Android: function() {return navigator.userAgent.match(/Android/i);},
 BlackBerry: function() {return navigator.userAgent.match(/BlackBerry/i);},
 iOS: function() {return navigator.userAgent.match(/iPhone|iPad|iPod/i);},
 Windows: function() {return navigator.userAgent.match(/IEMobile/i);},
 any: function() {return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());}
};

Let’s explain. We’re defining a variable as “isMobile” and telling it to search for the user agent of the browser you’re using. Android, BlackBerry (they still exist? yes, yes they do) , iOS, Windows and of course the ability to target all of them if you want to show target for mobiles only. Now, after this, we’ll generate the code for each

if( !isMobile.any() ){
 // Your code here 
}

This statement applies code to every item that is NOT a mobile device. The not is actually the exclamation mark in front of isMobile.

if(isMobile.Android()) {
 // Your Code Here
}

This statement will apply code to Android only.

if(isMobile.BlackBerry()) {
 //Your code here
}

This statement will apply code to BlackBerry only.

if(isMobile.iOS()) {
 //Your code here
}

This statement will apply code to iOS devices only.

if(isMobile.Windows()) {
 //Your code here.
}

The final statement will apply code to any mobile device from the predefined list.

Applying code to devices.

Now that you have the codes, and each are ready to fire, what next? How do you target buttons? Well, it’s quite very simple! Presuming that you already have a HTML markup made with the buttons you want to use, it’s time to give each of them class. For example:

<a href="#" class="button button-hidden SECONDARY_CLASS">Sample</a>

The above code is a basic, HTML markup, the detection can be applied to basically any element.  Notice the markup has 3 classes, button for the main styles of the class, button-hidden which we will use to hide the button and SECONDARY_CLASS.

The secondary class we’ll use to target specific devices. The SECONDARY_CLASS will be replaced by show-button using JavaScript, or you can add it manually to show that box permanently.

In your CSS, it’s time to add the magic.

.button-hidden{display:none;}
.show-button{display:block!important;}

Notice that the hidden button is now set to display:none, which means the button will be hidden. All operating system show classes are set to display:block plus important to make sure they override your original style and show automatically on detection.

Activating a button on a specific operating system.

Now let’s say we want to show the button above only on iOS devices. We must add the show-button to it using JavaScript.

if(isMobile.Windows()) {
 $('.button').addClass('show-button');
}

Voila! Now, browsing from an iOS device, it will automatically show you the button!

Using it for multiple elements.

To add this to your project, for multiple buttons, you’ll have to give each button a unique name, and target it with JS. Replace (‘.button’) with your unique class and target it for the operating system you want.

Why not use fade / hide / toggle in JS to show them?

This is the easiest way of doing things right? Well, right and wrong. Using these methods you’ll put a small strain on your Mobile Device’s CPU, which may not seem much, only combined with other elements it can lead to some laggy situations!

That’s it! Don’t forget to check our ThemeForest Portfolio, all our items have this ability implemented in them! Use it and abuse it and don’t forget to subscribe for more Freebies!