Transparent Buttons using ImageButton Class asp - html

Question

Okay here is the style sheet code: I want the ButtonTrans.png to be across each button on top auto fitting the size of the button.
.ButtonPanel {
position: absolute;
top: 0px;
left: 770px;
width: 500px;
height: 44px;
font-size: 12px;
font-weight: bold;
margin: 0px !important;
padding: 0px !important;
}
.functionbutton {
padding: 8px 4px;
margin: 6px 6px;
background: #3292aa;
background: -webkit-linear-gradient(top, #3292aa 0, #017795 100%);
background: linear-gradient(to bottom, #3292aa 0, #017795 100%);
border-color: #017795;
box-shadow: none;
color: #fff;
border-radius: 7px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
}
.functionbutton:hover {
background: #33a3c0 !important;
background: -webkit-linear-gradient(top, #33a3c0 0, #038eb2 100%) !important;
background: linear-gradient(to bottom, #33a3c0 0, #038eb2 100%) !important;
box-shadow: none !important;
border-color: #038eb2 !important;
}
.toolbutton {
padding: 8px 4px;
margin: 6px 6px;
background: #f8f8f8;
background: -webkit-linear-gradient(top, #f8f8f8 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #f8f8f8 0, #f2f2f2 100%);
border-color: #ccc;
box-shadow: 0 1px 0 0 #fff inset;
outline: 0;
border: 1px solid #ccc;
text-decoration: none;
border-radius: 7px;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
}
.toolbutton:hover {
background: #fdfdfd !important;
background: -webkit-linear-gradient(top, #fdfdfd 0, #fafafa 100%) !important;
background: linear-gradient(to bottom, #fdfdfd 0, #fafafa 100%) !important;
border-width: 1px !important;
border-style: solid !important;
}
And here is the HTML for the actual buttons within the page. I want the ButtonTrans.png to be the same size as each button and reside directly on top of the button to give the effect the button was clicked. I can not change any of the server side code currently so this will have to be the fix for now. I have attached a image of what I am looking for. I picture i have attached has style="postions:absolute;height:30px;width100px:" values added.
and idea of what I am trying to do
<asp:Panel ID="ButttonPanel" runat="server" CssClass="ButtonPanel">
<div class="toolbutton">
<label id="FlatPDFLbl">PDF</label>
<asp:ImageButton ID="FlatPDFBtn" runat="server" runat="server" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Create Flat PDF from Template" TabIndex="-1" OnClick="FlatPDFBtn_Click"></asp:ImageButton>
</div>
<div class="toolbutton">
<label id="FullPDFLbl">Fillable PDF</label>
<asp:ImageButton ID="FullPDFBtn" runat="server" runat="server" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Create Fillable PDF from Template" TabIndex="-1"
OnClick="FullPDFBtn_Click"></asp:ImageButton>
</div>
<div class="functionbutton">
<label id="SaveLbl">Save</label>
<asp:ImageButton ID="SaveBtn" CssClass="SaveBtn" runat="server" commandname="Launch" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Save changes to this customer" TabIndex="-1" OnClick="SaveBtn_Click"></asp:ImageButton>
</div>
</asp:Panel>