css3 buttons

 go to this link and see the live example of css buttons

 https://jsfiddle.net/csszilla/ssgp6mwr/8/
html code

<div class="text_slider">
   <span class="outer_round_button">
    <span class="round_button">
    <p style="color:white";>csszilla</p> </span> </span>
   
  <span class="outer_round_button red_circle">
     <span class="round_button">
      <p style="color:white";>csszilla</p>
      </span>
       </span>

<span class="outer_round_button green_circle">
     <span class="round_button">
     <p style="color:white";>csszilla</p>
      </span>
       </span>  


<css code>


.outer_round_button{border: 1px solid #5f7a87;
    border-radius: 100%;
    display: table;
    height: 106px;
    padding: 5px;
    text-align: center;
    width: 106px;}
    .round_button{  background-color: #5f7a87;
    border-radius: 50%;
    display: table-cell;
    height: 96%;
    vertical-align: middle;
    width: 96%;}
   
   
    .outer_round_button.red_circle{border: 1px solid #a7db6d;
    border-radius: 100%;
    display: table;
    height: 106px;
    padding: 5px;
    text-align: center;
    width: 106px;}
    .red_circle .round_button{  background-color: #a7db6d;
    border-radius: 50%;
    display: table-cell;
    height: 96%;
    vertical-align: middle;
    width: 96%;}
   
   
   
    .outer_round_button.green_circle{border: 1px solid #00ada9;
    border-radius: 100%;
    display: table;
    height: 106px;
    padding: 5px;
    text-align: center;
    width: 106px;}
    .green_circle .round_button{  background-color: #00ada9;
    border-radius: 50%;
    display: table-cell;
    height: 96%;
    vertical-align: middle;
    width: 96%;}   
   
    .outer_round_button:hover { padding:0px;}