.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Remove dashed border of button control using css

Posted By:shankey       Posted Date: April 11, 2011    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

Remove dashed border of button control using css
 

Step1: Create CSS for button

  CSS for normal button (Normal button will look like a yellow bulb)

  .CButton
 {
 background: url("Images/yellowbulb.png");
 background-repeat: no-repeat;
 background-position: top right;
 background-color: transparent;
 cursor: pointer;
 border: 0px;
 height: 256px;
 width: 256px;
 }


  CSS for hovered button (Hover button will look like a red bulb)


 

  .CButton:Hover { background: url("Images/redbulb.png"); background-repeat: no-repeat; background-position: top right; background-color: transparent; cursor: pointer; border: 0px; height: 256px; width: 256px; } 

Step2: Create button and apply CSS

 

  

  After applying CSS button will look like as shown in below image.

1.  Normal button



2.  Hovered button


Step3: Remove dashed border around buttons

 

  To remove the Dashed border around buttons set the "outline-width" property to "0px"

outline-width0px;

1.  Normal button


2.  Hovered button

You can also download the sample code of the above example.

 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend