3

我正在尝试使用CSS，而不是使用图像精灵来制作按钮。

这些将在整个站点中使用不同的文本，因此制作大图像精灵没有意义，特别是因为按钮的大小会根据文本而变化。

背部

这就是我能够实现的目标：（与原来的非常不同）

用css返回

小提琴链接

a {
    display: inline-block;
    line-height: 20px;
    text-decoration: none;
    font-family: 'Arial';
    font-size: 19px;
    font-weight: 700;
    color: #ddd;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #001151;
    text-shadow: 2px 2px 4px rgba(32,70,97,.55);
    background: #002483;
    background: linear-gradient(
      to bottom,
        rgba(0,36,131,1) 0%,
        rgba(0,44,151,1) 27%,
        rgba(0,61,166,1) 55%,
        rgba(15,77,180,1) 82%,
        rgba(23,83,185,1) 100%);
}

PS : (浏览器支持 >= IE9)

是否可以仅使用创建这样的按钮HTML + CSS？

4

3 回答 3

3

不要误会我的意思，但这个按钮很丑:)。现在的标准是使用非常微妙的渐变使按钮尽可能简单。

这是我的尝试，CSS只是：http: //jsfiddle.net/9CPBY/1/

我曾经before添加反射和after添加聚光灯眩光。

a:after{
    content:".";
    position:absolute;
    color:transparent;
    width:1px;
    height:1px;
    background:white;
    top:5px;
    left:70%;
    border-radius:10px;
    box-shadow:0px 0px 20px 10px white;
    
}

使用ColorZilla 的生成器生成的渐变。
仅在 Chrome 中测试过，在其他浏览器中也应该可以正常工作。

于 2013-08-15T20:13:33.410 回答
1

这是一个有眩光的例子。你需要用 2div秒

演示http://jsfiddle.net/kevinPHPkevin/hZgxV/

HTML

<div id="blue_button" >
    <div class="blue_glare"></div>
</div>

CSS

#blue_button {
margin-top:20px;
height: 30px; width: 150px; 
border-radius: 16px; 
border: 2px solid #ccc; 
text-align: center; 
background-color: rgba(60, 132, 198, 0.8); 
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9))); 
background-image: -moz-linear-gradient(top, #1c5b9b, #6cbfff); 
border-top-color: #8ba2c1; 
border-right-color: #5890bf; 
border-bottom-color: #4f93ca; 
border-left-color: #768fa5; 
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; 
float: left;
margin-right: 30px;
}

.blue_glare {
top: 0;
left: 5px;
border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
margin: 0 auto;255
z-index: 10;
}
于 2013-08-15T20:00:07.197 回答
-1

不幸的是，CSS 在这方面相当有限。但是，您始终可以使用Base64格式将图像嵌入到 CSS 中。

于 2013-08-15T19:57:25.113 回答