<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-lg-4">
<h2>CSS trick is called <font color=gray>'anicon'</font></h2>
<p>Adjust animation to fit your tastes. Tested in Firefox, Chrome and Chromium only.</p>
<ul class="list-disc">
<h3>Icon hides behind any div. Examples are:</h3>
<li>A - Three inputs [type=submit] in table rows. Icon pops to the left.</li>
<li>B - And a double bounce out that will animate two separate icons per your choice. (war or peace?)</li>
</ul>
</div>
<div class="col-lg-4 text-center">
<h2>A</h2>
<form action="" method="POST" name="respond-edit" id="respondForm">
<table class="table table-striped table-condensed">
<tr><td>
<div class="input-group">
<div id="anicon">
<i class="fa fa-edit anicon animate"></i>
<span class="overcast"><input type="submit" class="det-list-anchor" name="submit_edit" value="Edit"></span>
</div>
</div>
</td></tr>
<tr><td>
<div class="input-group">
<div id="anicon"><i class="fa fa-trash-o anicon animate"></i>
<span class="overcast"><input type="submit" class="det-list-anchor" name="submit_edit" value="Delete"></span>
</div>
</div></td></tr>
