开发者

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.

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

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-positio开发者_如何学Cn:center;
outline:0;
position:absolute;
top:-60px;
right:-1px;
z-index:9999;
display:block;
}


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

Should have everything you need, and this will help:

http://gradients.glrzad.com/


@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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜