myfiddle

HTML

<a href="#" class="btn btn-primary">Add</a>
  
  <input class="btn btn-primary" type="submit" value="Add" name="add1" onclick='if (confirm(&quot;Check all the entry ?&quot;))
                { document.post_57a43df006372873848099.submit(); }
                event.returnValue = false; return false;' >

CSS

.btn {
      position: relative;
      font-size: 16px;
      color: black;
      text-decoration: none;
      display: inline-block;
      border: 3px solid #333333;
      border-radius: 5px;
      padding: 10px;
      margin-top: 25px;
      overflow: hidden;
      font-family: Arial, sans-serif;
      font-weight: 300;
      -webkit-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
    }
    .btn span {
      position: relative;
      z-index: 1;
    }
      
    .btn:before {
      display: block;
      position: absolute;
        
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      margin-left: -100px;
      margin-top: -100px;
      content: '';
      border-color: #97455f;
      border-style: solid;
      border-width: 1px;
      border-radius: 100px;
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
      box-sizing: border-box;
    }
    
    .btn:hover {
      color:white ;
    }
    
    
    .btn:hover:before {
      border-width: 100px;
    }