在CSS中设计一个复杂的按钮

Question

我正在尝试使用CSS创建按钮，而不是使用图像精灵。

这些将在整个网站上使用不同的文本，因此制作大型图像精灵没有意义，特别是因为按钮的大小因文本而异。

这是我能够实现的目标:(与原来的非常不同）

Fiddle Link

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%);
}

P.S。 :(浏览器支持＆gt; = IE9）

仅使用HTML + CSS创建这样的按钮吗？

Answer 1

别误会我的意思，但这个按钮太丑了:)。现在的标准是使按钮尽可能简单，具有非常微妙的渐变。

以下是我的尝试，仅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's generator生成的渐变 仅在Chrome中测试过，在其他浏览器中也可以正常使用。

Answer 2

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

来做

DEMO 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;
}

Answer 3

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