How to create rounded button in using css 3.0 ?


Css 3.0 has been added one of excellent feature to create the rounded button without using any background image with few line of css code. We can create the rounded button in using css 3.0 like this.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<style type="text/css">
border:2px solid #a1a1a1;
padding:5px 50px; 
-moz-border-radius:35px; /* Firefox 3.6 and earlier */
 <form id="form1" runat="server">
 <br />
<div><asp:Button ID="btnHome" runat="server" CssClass="roundcorner" Text="Home" /> </div> <br />
<div><asp:Button ID="Button1" runat="server" CssClass="roundcorner" Text="About Us" /> </div> <br />
<div><asp:Button ID="Button2" runat="server" CssClass="roundcorner" Text="Contact Us" />  </div> <br />
<div><asp:Button ID="Button3" runat="server" CssClass="roundcorner" Text="Address" />  </div> <br />


Leave a Reply

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

You are commenting using your 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.