Html CSS中复杂按钮的设计

我正在尝试使用

CSS

制作按钮，而不是使用图像精灵

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

这就是我所能做到的：（与原来的非常不同）

附言：（浏览器支持>=IE9）

---

不幸的是，仅使用

HTML+CSS

就可以创建这样的按钮吗？

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

下面是一个有眩光的示例。您需要使用2

div

s来执行此操作

演示

HTML

---

别误会我的意思，但这个按钮很难看：）。现在的标准是使按钮尽可能简单，并带有非常细微的渐变

以下是我的尝试，

CSS

仅限：

我使用了

之前

添加反射，使用

之后

添加聚光灯眩光

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

使用生成的渐变。

---

仅在Chrome中测试，在其他浏览器中也可以正常工作。

我建议您在谷歌上简单搜索一下“css按钮生成器”、“html css按钮”、“酷炫的css html按钮”…您将获得120348102834个网站，这些网站将帮助您轻松实现这一目标。：）这是绝对可能的，如果有点复杂的话。我会首先使用这些按钮生成器中的一个，然后从那里调整：或者-祝你好运！别误会我的意思，但这个按钮很难看：）。现在的标准做法是使按钮尽可能简单，具有非常细微的渐变。@drip-您可以使用径向渐变背景您考虑过使用SVG作为背景吗？在蹩脚的IE中看起来没有那么尖锐，但仍然是一个很好的例子！先生，你真是个天才：）我用了你提到的同样的工具，但结果却大不相同。你是不是把纽扣的颜色分了？是的。我已经编辑了你贴的小提琴。我在之前和之后使用CSS伪元素

添加了另外两个
div
s。我需要一个用于矩形反射，另一个用于右上角的圆形灯光。
<div id="blue_button" >
    <div class="blue_glare"></div>
</div>

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

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