CSS split button with side drop down menu - html

I need a button with the following characteristics:
User clicks the left portion - "Edit" of the button and it takes
them to a form.
User clicks the right portion and it has a drop down
of a sub list menu.
I wrote the snippet below using two separate buttons which I took the approach from w3school and it looks like what I want except:
When I hover it, each button has its own hover behavior indepdently instead of doing it together.
When I reside my browser, this button breaks up into different rows.
How can I fix these deficiencies? or better yet if there is an out of the box button like this? I tried to google "button with side menu", "button side dropdown", button sub menu" ect.. but no luck so far.
.leftSideButton {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color:#64c1c9;
border-radius:5px 2px 2px 5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
}
.leftSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
.leftSideButton:active {
position:relative;
top:1px;
}
.rightSideButton {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color:#64c1c9;
border-radius:2px 5px 5px 2px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 13px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
margin-left: -4px;
}
.rightSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
.rightSideButton:active {
position:relative;
top:1px;
}
.splitButton{
display: block;
}
.btn-group leftSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="btn-group">
<button class="leftSideButton">Edit</button>
<button class="rightSideButton">
<i class="fa fa-caret-down"></i>
</button>
</div>
</body>
</html>


Move the hover to the parent div then apply the styles to both buttons.
.leftSideButton {
box-shadow: inset 0px 1px 3px 0px #91b8b3;
background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color: #64c1c9;
border-radius: 5px 2px 2px 5px;
border: 1px solid #566963;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 11px 23px;
text-decoration: none;
text-shadow: 0px -1px 0px #2b665e;
}
.leftSideButton:active {
position: relative;
top: 1px;
}
.rightSideButton {
box-shadow: inset 0px 1px 3px 0px #91b8b3;
background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color: #64c1c9;
border-radius: 2px 5px 5px 2px;
border: 1px solid #566963;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 11px 13px;
text-decoration: none;
text-shadow: 0px -1px 0px #2b665e;
margin-left: -4px;
}
.rightSideButton:hover {
background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color: #6c7c7c;
}
.rightSideButton:active {
position: relative;
top: 1px;
}
.splitButton {
display: block;
}
/* changes */
.btn-group {
/* Shrink the parent to fit the content */
display: inline-flex;
}
.btn-group:hover .rightSideButton,
.btn-group:hover .leftSideButton {
background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color: #6c7c7c;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="btn-group">
<button class="leftSideButton">Edit</button>
<button class="rightSideButton">
<i class="fa fa-caret-down"></i>
</button>
</div>


When I hover it, each button has its own hover behavior indepdently instead of doing it together.
Remove .btn-group leftSideButton:hover{...} from your css. You have already have this hover effect for each button declared previously.
When I reside my browser, this button breaks up into different rows.
Add .btn-group{ display: flex; flex-wrap: nowrap; } to your css.

Related

Button Active focus shadow default problem

The top of the button seems to have a default shadow when clicked you can see in the Codepen example the gold border gets darker around the top rim - how do I remove this behaviour?
Example
.button {
cursor:pointer;
height: 3rem;
width:10rem;
margin:15px;
font-size:2em;
font-family: Helvetica, Arial, Sans-Serif;
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 9%,rgba(102,102,102,1) 20%,rgba(71,71,71,1) 34%,rgba(71,71,71,1) 34%,rgba(44,44,44,1) 45%,rgba(0,0,0,1) 54%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
text-decoration:none;
border-radius:10rem;
border-color:#fcbd3f ;
border-width: 1.5px;
color:#d4d6d8 ;
box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
outline: none;
&:active{
outline: none;
box-shadow: inset 0px 7px 10px -10px;
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 16%,rgba(17,17,17,1) 51%,rgba(28,28,28,1) 70%,rgba(28,28,28,1) 70%,rgba(44,44,44,1) 82%,rgba(43,43,43,1) 82%,rgba(56,56,56,1) 82%,rgba(44,44,44,1) 82%,rgba(66,66,66,1) 84%,rgba(84,84,84,1) 91%,rgba(109,109,109,1) 92%,rgba(102,102,102,1) 98%,rgba(28,28,28,1) 100%,rgba(19,19,19,1) 100%);
}
&:hover{
color: white;
outline: none;
}
}
button:active{
outline: none;
box-shadow: inset 0px 7px 10px -10px;
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 16%,rgba(17,17,17,1) 51%,rgba(28,28,28,1) 70%,rgba(28,28,28,1) 70%,rgba(44,44,44,1) 82%,rgba(43,43,43,1) 82%,rgba(56,56,56,1) 82%,rgba(44,44,44,1) 82%,rgba(66,66,66,1) 84%,rgba(84,84,84,1) 91%,rgba(109,109,109,1) 92%,rgba(102,102,102,1) 98%,rgba(28,28,28,1) 100%,rgba(19,19,19,1) 100%);
}

This code fixes your problem:
.button:active {
border-left-style: solid;
border-top-style: solid;
}
EDIT: or please check working codepen

The border you have on the button is the default border. Hou only adjusted the width and the color, not the style.
Therefore it's common practise to define a button like so:
border: 1.5px solid #fcbd3f;
Where solid is the style of the border.

CSS Precedence Issue

I have in my style.css the rule which applies to entire web site:
a:hover{text-decoration:underline;color:#E35B00;}
I have also in my button.css:
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
padding: .5em 1.5em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
In my html page I have declared style.css before the button.css:
<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/button.css" media="screen" rel="stylesheet" type="text/css" />
The code is:
<div>
<form action="dosomething.htm" method="post">
<input type="submit" class="button blue" value="Option 1">
Option 2
</form>
</div>
The blue button (Option 1) has no problem with hovering because it is not an anchor. However the green button (Option 2) when hover over "Option 2" it is turning to the color of a:hover which is #E35B00 orange color instead of #538018; green color!
On the Firefox developer Rules console I am seeing the a:hover is below the green:hover. Why is this the case? I tried rearranging the order of the css but it's no use. The a:hover takes over the green:hover. This is driving me nuts. Your help is appreciated. Thanks in advance.

You never specify what color you want the text to be when you hover on the .green button, so it defaults to a:hover. To fix this, you just have to add in the color of what the .green button to the CSS .green:hover rule.
The whole .green:hover CSS rule should look like this.
.green:hover {
color: #e8f0de;
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
a:hover {
text-decoration: underline;
color: #E35B00;
}
.button {
display: inline-block;
zoom: 1;
/* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
font-weight: bold;
padding: .5em 1.5em .55em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
color: #e8f0de;
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
<div>
<form action="dosomething.htm" method="post">
<input type="submit" class="button blue" value="Option 1" />
Option 2
</form>
</div>
Another option is to put !important after color: #e8f0de in the .green CSS rule. !important makes a property take precedence no matter what.
If you want to do this, then the first line of the .green rule should be.
color: #e8f0de !important;
a:hover {
text-decoration: underline;
color: #E35B00;
}
.button {
display: inline-block;
zoom: 1;
/* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
font-weight: bold;
padding: .5em 1.5em .55em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.green {
color: #e8f0de !important;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
<div>
<form action="dosomething.htm" method="post">
<input type="submit" class="button blue" value="Option 1" />
Option 2
</form>
</div>

CSS ISSUE with HTML

i have color issue with css. when i put HREF in link the font color changes to grey but there is no grey color in its class in css.
The code is below.
HTML
<a class="css_button_addHRS" >ADD HOURS</a>
When i add href in the tag it changes the font color of ADD HOURS to grey it should be white. Any Idea? There is no other grey A in css.
CSS
.css_button_addHRS {
font-size: 14px;
font-family: Arial;
font-weight: bold;
text-decoration: inherit;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
border: 1px solid #d02718;
padding: 9px 18px;
text-shadow: 1px 1px 0px #810E05;
-webkit-box-shadow: inset 1px 1px 0px 0px #f5978e;
-moz-box-shadow: inset 1px 1px 0px 0px #f5978e;
box-shadow: inset 1px 1px 0px 0px #f5978e;
cursor: pointer;
color: #ffffff;
display: inline-block;
background: -webkit-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: -moz-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: -ms-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: linear-gradient(180deg, #f24537 5%, #c62d1f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f24537",endColorstr="#c62d1f");
}
.css_button_addHRS:hover {
background: -webkit-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: -moz-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: -ms-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: linear-gradient(180deg, #c62d1f 5%, #f24537 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c62d1f",endColorstr="#f24537");
text-decoration: none;
color: #ffffff;
}
.css_button_addHRS:active {
position: relative;
top: 1px;
color: #ffffff;
}
this css creates a button rounded corner in red color with white font color. Help will be appreciated.

You have to specify This. The page links will automatically change to default color of links, so you have to add this:
<style type="text/css">
a:link,
a:visited,
a:hover,
a:active{
color: #FFF;
text-decoration: none;
}
</style>
What editor do you use to code?

It sounds like it's default styling of a :visited link.
You should add this to fix it:
.css_button_addHRS:visited {
color: #ffffff;
}

The link, visited and active colors, if not specified, take the defaults values set by the browser, and it varies across browsers. Since you already specified a color for .css_button_addHRS class, the grey color surely appears when you have visited the link,so you have to specify a color for visited links, e.g:
.css_button_addHRS:visited{
color: #ffffff;
}
Hope it's useful!

mouse hover text color does not change

I know an easy question, but the text color did not change when hovering over the menu with the mouse. I know I have missed a place. But I want to help you. This is demo page link: CodePenio
Menu, point to changing the background color, but the text color does not change. When the mouse on the menu point text color with the background color should be changed.
HTML:
<div tabindex="0" class="sd">
<ul class="eddel">
<li><a class="stdelete" href="#" id="<?php echo $msg_id;?>" title='Delete update'>Sil</a></li>
<li>Düzenle</li>
</ul>
</div>
CSS:
.eddel {
border:1px solid #d8dbdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
background-image: -moz-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
background-image: -o-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
background-image: -ms-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
background-image: linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
-webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
padding:0;
width:80px;
margin-top: 15px;
margin-left: -50px;
padding-top: 4px;
padding-bottom:4px;
}
.eddel a {
width:80px;
height:25px;
text-decoration:none;
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:13px;
color:#000;
}
/* arrow for the expanding part */
.eddel:after {
content: "";
position: absolute;
top: -9px;
left: 47px;
border-style: solid;
border-width: 0 7px 8px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
}
.eddel:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 7px 8px;
border-color: #fafafa transparent;
display: block;
position: absolute;
top: -8px;
left:47px;
z-index:1;
}
.eddel li {
cursor:pointer;
list-style-type: none;
white-space: nowrap;
width:80px;
height:25px;
text-align:left;
line-height:25px;
text-indent:5px;
padding:0;
}
.eddel li:hover {
background:#3b5998;
width:80px;
height:25px;
padding:0px;
margin:0px;
cursor:pointer;
color:#FFF;
}
.sd {
text-align: left;
}

Just add:
.eddel li:hover a {
color: #FFF;
}
to your CSS

How to make button-looking buttons that are not images in form-submit buttons?

I had a designer help me make links that look like buttons that look something like this: http://www.comehike.com/hikes/scheduled_hike.php?hike_id=233 (the yellow buttons are the RSVP, Ride, Drive, etc.)
Those are not images. They are just styled links.
My question is - can I make a similar type of non-image button for the buttons that are submit buttons in forms?
Thanks!

Submit button with hover effect.
<!doctype html>
<head>
<style>
.button{
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius: 6x;
border: 1px solid #ABABAB;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E1E1E1), to(#F7F7F7));
background-image: -webkit-linear-gradient(top, #E1E1E1, #F7F7F7);
background-image: -moz-linear-gradient(top, #E1E1E1, #F7F7F7);
background-image: -ms-linear-gradient(top, #E1E1E1, #F7F7F7);
background-image: -o-linear-gradient(top, #E1E1E1, #F7F7F7);
background-image: linear-gradient(top, #E1E1E1, #F7F7F7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#E1E1E1', EndColorStr='#F7F7F7');
padding: 15px 0px;
margin: 0 auto;
width: 224px;
display: block;
color: #434953;
text-transform: uppercase;
font: 182% "League Gothic", Helvetica, Arial, sans-serif;
text-decoration:none;
text-align:center;
}
.button:hover{
border: 1px solid #ABABAB;
color: #303030;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#E1E1E1));
background-image: -webkit-linear-gradient(top, #F7F7F7, #E1E1E1);
background-image: -moz-linear-gradient(top, #F7F7F7, #E1E1E1);
background-image: -ms-linear-gradient(top, #F7F7F7, #E1E1E1);
background-image: -o-linear-gradient(top, #F7F7F7, #E1E1E1);
background-image: linear-gradient(top, #F7F7F7, #E1E1E1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F7F7F7', EndColorStr='#E1E1E1');
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
}
</style>
</head>
<body>
<input type="submit" class="button" value="submit" />
</body>

Yes, you can style the default buttons anyway you like, here is some CSS to get you started:
HTML
Gray Button
Red Button
Green Button
<button>Normal Button</button>
<button class="btn green">Green Button</button>
<button class="btn red">Red Button</button>
<button class="btn gray">Gray Button</button>
CSS
a, button {
display:list-item;
margin:10px 0;
}
a.button, button.btn {
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
}
a.red, button.red {
color:#fff;
background: red;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
}
a.green, button.green {
background: #7FFF24;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
}
Demo link: http://jsfiddle.net/andresilich/cXv8A/1/