Rounded Corner Button ASP.NET

Question

I want to use Rounded Corner Button in my asp.net application. Do we have anything in ASP.NET 3.5 which helps us to make a rounded corner button ?

Answer 1

As p.cambell told you, the tecnique at this link works great: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

But you've to substitute your "button" server control with an HyperLink server control , this because, the css is applied to the "a" tag.

So, in Visual Studio, instead draw a button, draw an HyperLink with CssClass="button"

Bye!

Answer 2

How about applying a CSS style to your button?

Sample code, demo, tutorial at Oscar Alexander

Using the code there, you can ensure all buttons get the style exactly as you want.

Answer 3

You could use the ajax control toolkit which has a rounded corners extender. Personally I have never used it in a project. I use the css3 border-radius and just let the IE users live with the square borders until their browser catches up (http://www.cssportal.com/css3-rounded-corner)

Here is the link to the control extender sample. http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/RoundedCorners/RoundedCorners.aspx

Answer 4

Here is the control and css that I'm using. My button is square, but it is not the case. You can create the rounded image by youself.

    <asp:LinkButton ID="lbtnSignIn" class="button" runat="server" OnClick="lbtnSignIn_Click"><span>Sign In</span></asp:LinkButton>

.button
{   
    background: transparent url('../../Images/ButtonLeft.gif') no-repeat top left;  
    display: block;
    float: left;
    line-height: 11px; /* 21px (Button Background) = 5px (padding-top) + 11px (font-size) + 5px(padding-bottom) */
    height: 21px; /* Button Background Height */
    padding-left: 9px;  
    text-decoration: none;
    font-weight: bold;
    color: white;
    font-size: 11px;    
}

a:link.button, a:visited.button, a:active.button
{
    color: white;
    text-decoration: none;
    margin-right: 10px;
}

a.button:hover
{ 
    background-position: bottom left;
}

a.button span, a.button span 
{
    background: transparent url('../../Images/ButtonRight.gif') no-repeat top right;    
    display: block;
    padding: 5px 9px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.button:hover span
{ 
    background-position: bottom right;
    color: white;
}