CODEWITHSUNDEEP
asp.netbuttonrounded-corners
msbyuva
msbyuva

Reputation: 3625

Rounded Corner Button ASP.NET

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 ?

Upvotes: 4

Views: 20464

Answers (4)

stighy
stighy

Reputation: 7170

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!

Upvotes: 1

Chris Mullins
Chris Mullins

Reputation: 6867

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

Upvotes: 3

Win
Win

Reputation: 62290

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.

alt text

alt text

    <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;
}

Upvotes: 3

p.campbell
p.campbell

Reputation: 100607

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.

Upvotes: 1

Related Questions