Button Styling

Tuesday 16 July 2013
How to style button shown below

  




copy image 

 CSS for Submit Button

.clientSubmitButton
{
    background: #FAFBFB url('submitbutton.bmp') no-repeat scroll 0px center;
    border-radius: 5px;
    border: 1px solid #A4ABAC;
    color: #40464A;
    padding: 4px 7px 4px 7px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: inset 0px -2px 5px rgba(164, 171, 172, 0.5);
    display:inline-block;
}
.clientSubmitButton:hover
{
    text-decoration: underline;    
    cursor: pointer;
    cursor: hand;
}

ASP.Net Button Control











 


  CSS for Submit Button

.button {
     
    /*Step 2: Basic Button Styles*/
      display:inline-block;
    /*Step 2: Basic Button Styles*/
height:30px;
width:100px;
    background: #34696f;
    border: 2px solid rgba(33, 68, 72, 0.59);
   
    /*Step 3: Text Styles*/
    color: rgba(0, 0, 0, 0.55);
    text-align: center; 
 
 /*Step 4: Fancy CSS3 Styles*/
    background: -webkit-linear-gradient(top, #34696f, #2f5f63);
    background: -moz-linear-gradient(top, #34696f, #2f5f63);
    background: -o-linear-gradient(top, #34696f, #2f5f63);
    background: -ms-linear-gradient(top, #34696f, #2f5f63);
    background: linear-gradient(top, #34696f, #2f5f63);
     
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
     
    -webkit-box-shadow: 0 8px 0 #1b383b;
    -moz-box-shadow: 0 8px 0 #1b383b;
    box-shadow: 0 8px 0 #1b383b;
     
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
     
}
 
/*Step 3: Link Styles*/
a.button2 {
    text-decoration: none;
}
 
/*Step 5: Hover Styles*/
a.button:hover {
    background: #3d7a80;
    background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
    background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
    background: -o-linear-gradient(top, #3d7a80, #2f5f63);
    background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
    background: linear-gradient(top, #3d7a80, #2f5f63);
}

ASP.Net Button Control


No comments:

Post a Comment

Sharing

Get widget