forms - How to work with hyperlink and submit buttons together in Foundation Zurb CSS -

i option button found in zurb building block library here: http://zurb.com/building-blocks/option-button however, working 1 x normal hyperlink button , submit button. i'm finding causing me headaches wherever try have neat rows of buttons should same. additional css 'option button' work desired when working input submit class ?

my html pretty straightforward , looks this:

<form name="article_selection" action="single-article-view.php" method="post">           <div class="row">             <div class="medium-6 columns">                 <div class="wrapper">                      <label>read more</label>                      <a href="<?php echo $article_url; ?>" class="inside">read on website</a>                       <input type="hidden" value="<?php echo $article_id; ?>" name="article_id" />                     <input type="submit" class="inside" name="<?php echo $article_id; ?>" value="read on website" />                   </div>             </div>         </div> </form> 

in scenario 2nd half of option button malformed. can't update image display due reputation restrictions (seriously?)

<a href="http://s96.photobucket.com/user/indoanalytics/media/button_problem_zpszhgpvzbt.png.html" target="_blank"><img src="http://i96.photobucket.com/albums/l185/indoanalytics/button_problem_zpszhgpvzbt.png" border="0" alt=" photo button_problem_zpszhgpvzbt.png"/></a>

the css per building blocks option button (linked above) is:

.wrapper {   overflow: hidden;   display: inline-block;   border: 2px solid #008cba;   border-radius: 999px;   text-align: center;   width: 100%;   background: #fff;   margin-top: 50px;  }  .wrapper:hover {   border: none;   background-color: #008cba;   transition: background-color 0.3s ease;  }  .wrapper:hover .inside {   display: block;   font-size: 16px;   padding: 22px;   float: left;  }  .wrapper:hover .inside:hover {   transition: background-color 0.3s ease;   background-color: rgba(0, 0, 0, 0.1);  }  .wrapper:hover label {   display: none;  }  .wrapper .inside {   display: none;   color: #fff;   width: 50%;   z-index: 9999;  }  .wrapper label {    padding: 16px;   color: #008cba;   font-size: 16px;   font-weight: bold;  } 

update: have separate button stylings before above in css may causing problem.

.topic-button {           border-style: solid;         border-width: 1px;         font-family: inherit;         font-weight: bold;         line-height: 1;         position: relative;         text-decoration: none;         text-align: center;         -webkit-border-radius: 3px;         border-radius: 3px;         background: #009fd9;         color: #fff;         box-shadow: rgba(255, 255, 255, .4) 0 1px 0 inset;         border-color: #008cbf;         font-size: 12px;         padding: 5px 6px;         margin-top: 2px;         cursor: pointer; }  .menu-topic-button {          width:99%;         background: #444444;         border:none;         font-family: inherit;         font-weight: bold;         line-height: 1;         position: relative;         text-decoration: none;         text-align: center;         color: white;         font-size: 14px;         padding: 2px;         margin-top: 2px;         cursor: pointer;       } 

i have attempted applying css above to:

.wrapper button[type="submit"] {} .wrapper input[type="submit"] {} 

for both have copied .inline css zurb building blocks tried resetting css values 0 in both, no luck. appreciated.