A unique button design is featured here. The button utilizes an <a> link, with the button text being a font-awesome icon of an eye.
<a class="action-button ng-scope"
ng-click="orderCtrl.showDetails(gridItem)">
<i class="fa fa-eye"></i>
</a>
Styling in CSS:
.action-button {
display: inline-block;
padding: 3px 5px 5px 4px;
margin: 0 2px;
border: 1px solid rgb(172, 172, 172);
width: 23px;
border-radius: 3px;
height: 23px;
box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.37) inset;
cursor: pointer;
line-height: 14px;
}
fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
position: relative;
}
An odd issue arises where the button only responds to clicks outside the font-awesome eye shape. Clicking inside the eye area does not activate the button as expected.