make buttons like xero

Hi,

I would like to tweak my button code to make it look like the 2 types of buttons in xero in the image provided

currently I have
.button_example {
border:1px solid #a0a0f2; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px;
border-radius: 3px;
font-size:12px;
margin-right:5px;
padding: 10px 10px 10px 10px; 
text-decoration:none;
display:inline-block;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
//font-weight:bold;
color: blue;
 
background-color: #d2d2f9; 
 background-image: -webkit-gradient(linear, left top, left bottom, from(#d2d2f9), to(#a6a6f2));
 background-image: -webkit-linear-gradient(top, #d2d2f9, #a6a6f2);
 background-image: -moz-linear-gradient(top, #d2d2f9, #a6a6f2);
 background-image: -ms-linear-gradient(top, #d2d2f9, #a6a6f2);
 background-image: -o-linear-gradient(top, #d2d2f9, #a6a6f2);
 background-image: linear-gradient(to bottom, #d2d2f9, #a6a6f2);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d2d2f9, endColorstr=#a6a6f2);

}



.button_example:hover {

 text-decoration: none; 
  color: red;
 // font-weight:bold;

    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); 
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    

}

Open in new window


[embed=file 928361]

Open in new window

jagguyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Prasadh BaapaatWeb Designer & DeveloperCommented:
no image to look at :(
jagguyAuthor Commented:
xero
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Jagguy,
there are lot of styles involved if you look at the entire image,

here I have done a style for the button "New Credit Note" as in image. it may not be exact, but maybe similar to what you are looking for.
.button_example {
	border:1px solid #d6d6d6; 
		-webkit-border-radius: 3px; 
		-moz-border-radius: 3px;
	border-radius: 3px;
	font-size:12px;
	margin-right:5px;
	padding: 7px 12px 5px 12px; 
	text-decoration:none;
	display:inline-block;
	color: 048fc2;
 
	background-color: #ffffff; 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e3e3e3));
	background-image: -webkit-linear-gradient(top, #ffffff, #e3e3e3);
	background-image: -moz-linear-gradient(top, #ffffff, #e3e3e3);
	background-image: -ms-linear-gradient(top, #ffffff, #e3e3e3);
	background-image: -o-linear-gradient(top, #ffffff, #e3e3e3);
	background-image: linear-gradient(to bottom, #ffffff, #e3e3e3);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#e3e3e3);
}
a.button_example {
	color: #048fc2;
}
.button_example:hover {
	text-decoration: none; 
	color: red;
		-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); 
		-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Open in new window

for the more white buttons, you can change the color #e3e3e3 to #ffffff in the CSS, rename the button style it and use it.

the mouseover text color for buttons is RED currently, you can change it to any color you want.
color: red;

Open in new window

If you want some ready-made styles, then you can use Bootstrap.

For you information, there are a few predefined styles in bootstrap. The red button will be DANGER, Green one SUCCESS and Blue one will be PRIMARY... check it out if you want.

Hope it helps you.
thanks,
Prasadh

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prasadh BaapaatWeb Designer & DeveloperCommented:
buttons
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.