如何在服务器颜色时应用渐变效果

Question

我按了一个按钮：

<div class="pl-menu">

    <ul id="save-button"><li style="background-color:black" onClick="">SAVE</li></ul>

</div>

这是CSS：

.pl-menu {

color: #FFF;
text-transform: uppercase;
margin-top: 0px;
text-align: center;
font-size: 18px;
border: 1px solid #ffffff;
width:350px;
}

.pl-menu ul{

height:inherit;

}

 .pl-menu ul li {

list-style-type: none;
height: inherit;
text-align: center;
height: 45px;
border: 0.2px solid #ffffff;
}

这是小提琴链接：example

出于某种原因，我必须使用这个html ul和li代码来制作这个按钮。

现在我想实现以下效果：

1）make按钮看起来更加坚固：

2）当用户点击按钮时，按钮看起来“淡出”

问题：

a）我想知道，我可以应用什么CSS技术使按钮看起来像图像1一样坚固

b）我可以应用什么CSS技术使其看起来“淡化”。 （我试过不透明度：0.8，但它不是我想要的）。

=======更新=============

box-shadow：插图适合我。

Answer 1

我想制作渐变但颜色来自服务器，你可以使用插入阴影，半透明的白色渐渐消失::

.pl-menu ul li {

    list-style-type: none;
    text-align: center;
    border: 1px solid #ffffff;

    height: auto;
    width: 100%;
    padding: 10px 0px;

    box-shadow: inset 0px 15px 25px rgba(255,255,255, 0.5);
    -webkit-animation: colors 4s infinite;
    animation: colors 4s infinite;

}

在这个fiddle我已经在背景颜色上设置了动画，只是为了表明光效与背景颜色无关

Answer 2

我做了一些让你的按钮看起来像照片中的按钮的事情。

Fiddle

1. 使按钮具有padding而不是height，使文本垂直和水平居中。
2. 我使用Colorzilla生成的渐变作为背景。
3. 将整个菜单的背景设为黑色
4. 使用:active伪元素，只能在单击对象时分配CSS。

我将opacity设置为0.4，而元素为:active

.pl-menu ul li {

    list-style-type: none;
    height: inherit;
    text-align: center;
    height: auto;
    border: 1px solid #ffffff;

    height: auto;
    width: 100%;
    padding: 10px 0px;

    background: #2b2d30; /* Old browsers */
    background: -moz-linear-gradient(top,  #2b2d30 0%, #45484d 28%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2d30), color-stop(28%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #2b2d30 0%,#45484d 28%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2d30', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

.pl-menu ul li:active {

    opacity: 0.4;
}

瞧！

Answer 3

问题：

a）我想知道，我可以应用什么CSS技术让按钮看起来像图像1一样坚固

主要是line-height，还有一点颜色造型。您需要一个瘦脸类型的Web字体。

b）我可以应用什么CSS技术让它看起来“淡化”。 （我试过不透明度：0.8，但它不是我想要的）。

有CSS3技术可以做到这一点。简单的旧颜色变化也可以做到。

这是一个FIDDLE - 我使用Ultimate CSS Gradient Generator

制作了渐变 编辑：这与@ David的答案非常相似，比我早两分钟。一个区别是我的方法使用JS在LI上点击后设置一个类，假设您希望该视觉状态向用户指示“正在发生保存”。如果你不需要它，只想在一个人点击时想要效果，:active可以使用更少的代码！