mobile buttons

by Eric Miller

HTML

<br />
<div style="text-align:center; margin-bottom:20px;">
    <a class="button" href="#">Button 1</a>
    <a class="button button-white" href="#">Button 1</a>
    <a class="phone button button-green" href="callTo:+18886009263">(888) 600-9263</a>
</div>

<div class="wrapper mobile-wrapper">
    <nav class="nav nav-bar">
        <ul>
            <li><a class="button button-white button-back" href="#">&larr;</a></li>
            <li><a class="button button-white button-menu" href="#">Menu</a></li>
        </ul>
    </nav>
    <div class="site-content">
        <div id="block-system-main" class="block block-system">
  <div class="block-inner clearfix">
                <div class="block-content content">
      <div class="view view-news-events view-id-news_events view-display-id-page view-dom-id-27b78e7fb0be8511ba5df754c16d7226">
            <div class="view-header">
      Join us for one of our speaking series events!  Hear industry experts talk about real-life case studies on a wide vaiety of topincs in a business casual, friendly environment.

Capstone's Summit sessions include a complimentary lunch and a hosted speaker.  You will have an opportunity to ask questions, network with other professionals, and you may be one of the lucky individuals leaving the session with a door prize!

Please email us if you have topics you would like us to sponsor, or if you would be interested in being one of our hosted speakers.    </div>
  
  
  
      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first views-row-last article">
      
  <span class="views-field views-field-title">        <span class="field-content"><a href="/content/infotec-omaha-april-17-18-2012">Infotec Omaha April 17-18, 2012</a></span>  </span>  
  <div class="views-field views-field-body">        <div class="field-content">Capstone has sponsored the Mobile Technology track and will be presenting a case study on Wednesday, April 18 9:30-10:30 a.m.  Visit us in...

CSS

body{
 font-size:13px;   
}
.button {
   border: 1px solid #0a3c59;
   background: #c7c7c7;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c7c7c7));
   background: -webkit-linear-gradient(top, #ffffff, #c7c7c7);
   background: -moz-linear-gradient(top, #ffffff, #c7c7c7);
   background: -ms-linear-gradient(top, #ffffff, #c7c7c7);
   background: -o-linear-gradient(top, #ffffff, #c7c7c7);
   background-image: -ms-linear-gradient(top, #ffffff 0%, #c7c7c7 100%);
   padding: 10.5px 21px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 14px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
    min-height:44px; min-width:44px;
   }

.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#bdbdbd));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }


.button-green {
   border: 1px solid #204018;
   background: #1f7009;
   background: -webkit-gradient(linear, left top, left bottom, from(#0ca823), to(#1f7009));
   background: -webkit-linear-gradient(top, #0ca823, #1f7009);
   background: -moz-linear-gradient(top, #0ca823, #1f7009);
   background: -ms-linear-gradient(top, #0ca823, #1f7009);
   background: -o-linear-gradient(top, #0ca823,...