title: Show/hide specific links based on browser type
body: <p>So I have a site that serves up a button to download a Chrome Extension. For any other browser than chrome or a mobile browser, it provides a different link. It seems to work, but the button loads rather slowly and some users have reported not even seeing the button.  </p>
  
  <p>So as a fall back I was thinking of just have a button load by default and if the javascript browser detection works have this default button hide.   </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="http://goo.gl/1r8zjq" target="_blank" class="btn chrome-webstore"&gt;Get Betty for Gmail&lt;/a&gt;                                
  &lt;a href="http://trybetty.com/mobile.html" target="_blank" class="mobile-other"&gt;Get Betty for Gmail&lt;/a&gt;                               
  &lt;a href="http://trybetty.com/other-browser.html" target="_blank" class="desktop-other"&gt;Get Betty for Gmail&lt;/a&gt;
  &lt;a onclick="chrome.webstore.install()" id="install-button" class="chrome"&gt;Get Betty for Gmail&lt;/a&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  window.onload = function load(){
  var ua = navigator.userAgent;
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(ua))
  $('a.chrome-webstore').hide();
  $('a.mobile-other').show();
  else if (/Chrome/i.test(ua))
  $('a.chrome-webstore').hide();
  $('a.chrome').show();
  else
  $('a.chrome-webstore').hide();
  $('a.desktop-other').show();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.mobile-other{
  display: none;
  }
  
  .desktop-other{ 
  display: none;
  }
  
  .chrome{ 
  display: none;
  }
  
  .btn-1{ /* Orange */
  background:#f38630;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/wojo/v9sWb/" rel="nofollow">http://jsfiddle.net/wojo/v9sWb/</a></p>
  
  <p>Thanks in advance for your help!!</p>