How to use .psd layered button in ASP.NET Web Application

Question

I have .psd button. It has 3 layer: btn, btn_hover and btn_active. Is it possible to use it in ASP.NET Web Application? Should I use ImageButton Control or something else? How I can define hover and active img? Thank you for any help!

Answer 1

You can use either ASP.Net Button or ASP.Net LinkButton, and style it with CSS.

Note: you cannot use psd file right away. You need to convert to png (or jpg) images.

The easiest method is to use a sprite image (see in the code below), and move the background position on hover and active.

Button

<style type="text/css">
    .submit { 
        border: 1px solid #563d7c; 
        border-radius: 5px; color: white; 
        padding: 5px 10px 5px 25px; 
        background-image: url(https://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6); 
        background-position-y: 465px; 
        background-position-x: 5px; 
        background-color: #563d7c; 
    }
    .submit:hover {
        background-position-y: 435px; 
        background-position-x: 5px; 
    }
    .submit:active {
        background-position-y: 415px; 
        background-position-x: 5px; 
    }
</style>
<asp:Button runat="server" ID="Button1" Text="Submit" CssClass="submit" />

HyperLink

<style type="text/css">
    .link-button { 
        border: 1px solid #563d7c; 
        border-radius: 5px; color: white; 
        padding: 5px 10px 5px 25px; 
        background-image: url(https://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6); 
        background-position-y: 465px; 
        background-position-x: 5px; 
        background-color: #563d7c; 
    }
    .link-button:hover {
        background-position-y: 435px; 
        background-position-x: 5px; 
    }
    .link-button:active {
        background-position-y: 415px; 
        background-position-x: 5px; 
    }
</style>
<asp:LinkButton runat="server" ID="LinkButton1" CssClass="link-button" Text="Submit"/>