How do I make this "gradient" with css?

HTML & CSS
1

I made an example in PS, but want to do the same in css.

Also if someone know if it is possible to do it but diagonal from on bottom-corner to top-corner on the opposit side.

2

There are tons of resources, articles and tools online for creating “css3 gradient buttons”. Check out some of those, grab their code, and if you have trouble with it, give us a shout here. :slight_smile:

3

ReGGaeDude,

Put this in your toolbox:

4

One note, you could do this even w/o gradients using box-shadow.


		ul {padding:0; margin:0; list-style: none; display:table;}
li {display: inline-block; padding: .5em;   box-shadow: inset 0 1.125em .0625em rgba(255,255,255,.65),  1px 1px 2px #000; text-shadow: 0 1px 0 #fff;  border-radius:.125em}
li+li { margin-left:1em}

.red {background: red;  box-shadow: inset 0 1.125em .0625em rgba(255,255,255,.44), 1px 1px 2px #000;}
.cyan {background: cyan; }
.pink {background: pink; }
.orange {background: orange; }
li:hover { background: #555}
 
<ul>
	<li class="red">Bushy</li>
	<li class="cyan">Ray</li>
	<li class="pink"> Veronica </li>
	<li class="orange">Havoc</li>
</ul>

which has the advantages of : easier semantics, can (also) interact with bg-color, and you dont have to redo the whole rule for :hover effects.

hope that helps