CODEWITHSUNDEEP
cssbuttongradient
bhups
bhups

Reputation: 14875

How can I create button using pure CSS which involves linear gradients and background color

How can I create button using pure CSS with a sold background color and on top of that and an oval shape gradient in the center of it. I don't want to use any external images.Here is the sample button.Example Button
In this example background is solid black and the blue area is composed of two linear gradient (from top(#92B5FD) to middle(#6094FC) and then from middle(#4484FB) to bottom(#44BBFC)).
I started using following piece of CSS but couldn't figure out to get the desired result.

.gradButton {width:620px;
height:60px;
border:1px solid black;
padding: 0px;
background: -webkit-gradient(linear, left top, left bottom, from(#92bffd), to(#6094fc), color-stop(0.5, #4484fb), color-stop(0.5, #44bbfc));
background-position:center;
outline:0;
position:absolute;
top:-60px;
right:-1px;
z-index:9999;
display:block;
}

Upvotes: 0

Views: 1123

Answers (2)

user2647
user2647

Reputation: 41

@Alex's link to the gradients tool is very useful. You should also check this out - Pure CSS Buttons because it has an example that looks a lot like the one that you want, and it's also basic css stuff without images.

Upvotes: 0

Alex
Alex

Reputation: 7374

http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques

Should have everything you need, and this will help:

http://gradients.glrzad.com/

Upvotes: 3

Related Questions