Home > ASP.Net, CSS > Image with LinkButton Control using CSS

Image with LinkButton Control using CSS


Hi

try this example:-

<div class="button">
   <asp:LinkButton ID="btnSave" runat="Server" CssClass="bSave" Text="Save User" OnClick="btnSave_Click" 

ValidationGroup="userDetails"  UseSubmitBehavior="false" />
</div>

<div class="button">
    <asp:LinkButton ID="btnCancel" runat="Server" CssClass="bCancel" Text="Cancel" OnClick="btnCancel_Click"

CausesValidation="False"   UseSubmitBehavior="false" />
</div>

<div class="button">
    <asp:LinkButton ID="btnDeleteUser" runat="Server" CssClass="bDelete" Text="Delete" UseSubmitBehavior="false" />
</div>
<div class="clear"></div>

//–and CSS

.button
{

    background-color:#84A1D6;
    border:solid 2px #415D9B;
    margin:5px;
    min-width:70px;
    height:20px;
    float:left;
    padding-left:3px;
}

.button a
{
    display:block;
    padding:2px 5px 2px 20px;
    min-width:70px;
}

.button:hover
{
    background-color: #a0bdf2;
}

.button a:active
{
    border-top:solid 1px black;
}

/* Button Style */

.button a.bLogin
{
    background-image: url(Images/Login.png);
    background-position:left;
    background-repeat:no-repeat;   
}

.button a.bSave
{
    background-image: url(Images/Save.png);
    background-position:left;
    background-repeat:no-repeat;   
}

.button a.bCancel
{
    background-image: url(Images/Cancel.png);
    background-position:left;
    background-repeat:no-repeat;   
}

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, CSS
  1. January 25, 2013 at 7:10 pm

    Thank you, I have just been looking for information about
    this topic for ages and yours is the best I have discovered till now.
    But, what about the bottom line? Are you sure about the source?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: