Can I make this style in pure CSS (button)

Question

How can I get this gradient effect in css?

Answer 1

You can use the following css and html to do something in your post

CSS

#button {
    background-color: #7BCEE6;
    background-image: -moz-linear-gradient(top, #7BCEE6, #3F7DBB); /* FF3.6 */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7BCEE6), color-stop(1, #3F7DBB)); /* Saf4+, Chrome */
    background-image: linear-gradient(top, #7BCEE6, #3F7DBB);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7BCEE6', EndColorStr='#3F7DBB'); /* IE6–IE9 */
    width:120px;
    height:40px;
    -moz-border-radius: 12px; /* FF1+ */
    -webkit-border-radius: 12px; /* Saf3-4 */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome */
}
#image {
    width:25px;
    height:40px;
    background:#930;
    margin-left:10px;
    float:left;
}
#text {
    text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */
    color:#fff;
    font-size:22px;
    float:left;
    margin-top:5px;
}

HTML

<div id="button">
  <div id="image"></div>
  <div id="text">Reports</div>
</div>

live example: http://jsbin.com/ebuno5

Notes Where there is a red block, it is assumed that you can add a png image. Also, you should keep in mind that most css3 in Internet explorer 8 is not supported. To add some css3 functions, for example, you can pie.htc

Answer 2

I recently saw these examples:

http://lab.simurai.com/css/buttons/

They use a lot of CSS to remove bleeding, so check carefully ...

Answer 3

: http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

Answer 4

CSS3. , . http://css3generator.com/, . : http://www.colorzilla.com/gradient-editor/. :

/* old browsers */
background: #1E5799; 
/* firefox */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%);
/* webkit */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
/* ie */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 );

CSS3 PIE CSS3 Internet Explorer: http://css3pie.com/. !

Answer 5

, http://gradients.glrzad.com/ CSS:

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.45, rgb(26,106,163)),
    color-stop(0.87, rgb(36,183,224))
);

background-image: -moz-linear-gradient(
    center bottom,
    rgb(26,106,163) 45%,
    rgb(36,183,224) 87%
);

( , ), Internet Explorer.

You should also check out Chris Coyier CSS3 button maker .

Answer 6

I use this site for gradients.

Note that Opera (currently in version 11) does not support CSS3 gradients at all, so make sure it looks normal with some kind of fallback.

Answer 7

Check out the CSS Pie . It provides a cross-browser interface border-radius, box-shadow and gradient