我可以使用纯CSS（按钮）制作此样式

1

您可以使用下面的CSS和HTML在你的岗位上实现的东西按钮

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>

活生生的例子：http://jsbin.com/ebuno5

笔记哪里是红色块，应该是你可以添加一个PNG图像。此外，你必须记住，大多数Internet Explorer 8下的css3不受支持。要添加一些CSS3功能，即你可以在你的pie.htc

来源

2011-01-07 20:59:26 Sotiris

1

我最近看到这些例子：

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

这些使用了大量前沿的CSS所以测试彻底...

来源

2011-01-07 20:37:04

+0

+1对于真棒链接 – qwertymk 2011-01-07 20:41:51

1

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

来源

2011-01-07 20:38:37 PeeHaa

0

是的，我使用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中不起作用。

此外，你必须检查出克里斯Coyier的CSS3 button maker。

来源

2011-01-07 20:38:48

+0

IE具有梯度太大，队友：`过滤器：进程id：DXImageTransform.Microsoft.gradient（startColorstr = '＃24B7E0'，endColorstr =” ＃1A6AA3'，GradientType = 0）;` – mingos 2011-01-07 20:42:46

1

你需要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添加为Internet Explorer CSS3支持：http://css3pie.com/。祝你好运！

来源

2011-01-07 20:40:40 RobinBrouwer

0

我使用this site作为渐变。

请注意，Opera（目前在版本11）根本不支持CSS3渐变，所以请确保它具有某种后备状态。

来源

2011-01-07 20:47:23 mingos

0

看一看CSS Pie。它提供了跨浏览器的边界半径，箱阴影和渐变功能

来源

2011-01-07 20:48:32 iBiryukov