css
/*toolbar start*/
.div-toolbar {
border: solid 1px #8ca1bc;
width: 945px;
margin: 0;
}
.ul-toolbar {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(217, 229, 242);
background-image: url('Images/toolbar-background.png');
background-origin: border-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: repeat-x;
background-size: auto;
border: solid 1px #d9e5f2;
padding: 1px;
height: 27px;
}
.ul-toolbar li {
float: left;
list-style-type: none;
vertical-align: middle;
}
.ul-toolbar li img {
width: 14px;
height: 14px;
}
.ul-toolbar li a {
padding: 5px 6px 3px;
border: solid 1px #E3ECF7;
display: block;
text-decoration: none;
color: black;
outline-color: invert;
}
.ul-toolbar li a:hover {
border: solid 1px #8ca1bc;
background-image: url('Images/toolbar-menu.png');
}
.ul-toolbar li span {
padding-left: 1px;
}
/*toolbar end*/
html
<div class="div-toolbar">
<ul class="ul-toolbar">
<li>
<a href="javascript:void(0)" οnclick="">
<img src="~/Content/Images/icon_print.png" />
<span>Print</span></a></li>
<li>
<a href="javascript:void(0)" οnclick="">
<img src="~/Content/Images/icon-back.png" />
<span>Back</span>
</a>
</li>
<div class="clear"></div>
</ul>
</div>