是否可以在纯CSS中使这个特定的按钮效果？

Question

我正在为一个学校项目设计一个网站，我正在尝试为按钮和导航设计一个特定的风格，但我不知道该怎么做。

我考虑过做边框效果，但是当我意识到它不仅涉及改变个别方面的颜色而是在 half 中切割两侧并以不同方式着色这些部分时，我停了下来。在它后面的div上的渐变可能会起作用，但不仅会变得复杂，而且在我要像3D形状的边缘那样锐利时会看起来模糊。这是可行的，还是我必须使用图像？

编辑：哇，看起来有很多方法。 Code Golf，有人吗？

Answer 1

如果您还想支持IE8，则不使用css渐变的解决方案：http://jsfiddle.net/2am780pq/

HTML：

<a class="button">Cool</a>

CSS：

.button {
  display: inline-block;
  position: relative;
  background-color: #4755e7;
  padding: 10px 20px;
  color: #fff;
}

.button:before {
  content: '';
  position: absolute;
  top: 50%;
  bottom: -5px;
  left: -5px;
  right: -5px;
  margin: auto;
  background-color: #4451dc;
  z-index: -1;
}

.button:after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: 50%;
  left: -5px;
  right: -5px;
  margin: auto;
  background-color: #5d67e9;
  z-index: -1;
}

Answer 2

没有渐变也没有伪元素，box-shadow也可以完成这项工作： http://codepen.io/anon/pen/NPaZBd

a{ 
  display: inline-block;
  color: #FFF;
  padding:5px 1em;  
  line-height:2em;
  background:#4755E7;
  margin:1em;
  box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9,
    0.8em -0.8em 0 -0.5em #5d67e9,
    -0.8em 0.8em 0 -0.5em #4451dc,
    0.8em 0.8em 0 -0.5em #4451dc;
}
/* add an inside blurry border too ? */
a:nth-child(even) {
   box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9,
    0.8em -0.8em 0 -0.5em #5d67e9,
    -0.8em 0.8em 0 -0.5em #4451dc,
    0.8em 0.8em 0 -0.5em #4451dc,
    inset 0 0 1px
}

<a href="#"> link</a>
<a href="#"> link link</a>
<a href="#"> link bigger link</a>
<a href="#"> link even bigger works still</a>

Answer 3

是的，具有渐变背景和嵌套元素。在不支持CSS3的浏览器中，这不兼容跨浏览器。

实例：JSFiddle

HTML：

<a href="#" class="button"><span>Click Me</span></a>

CSS：

.button {
    display: inline-block;
    padding: 4px;
    background: rgba(115,127,255,1);
    background: -moz-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(115,127,255,1)), color-stop(50%, rgba(68,81,220,1)), color-stop(51%, rgba(68,81,220,1)), color-stop(100%, rgba(68,81,220,1)));
    background: -webkit-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
    background: -o-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
    background: -ms-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
    background: linear-gradient(to bottom, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
}

.button span {
    display: inline-block;
    background: #4755E7;
    color: #fff;
    padding: 0.5em 0.75em;
}

Answer 4

这里有一个元素解决方案，简化标记：D

<b>Im sexy and i know it!</b>

http://jsfiddle.net/ebdq20vm/1/

b {
    padding: 20px;
    display: inline-block;
    color: #FFF;
    background: #5d67e9;
    background: -moz-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5d67e9), color-stop(51%, #4451dc));
    background: -webkit-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
    background: -o-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
    background: -ms-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
    background: linear-gradient(to bottom, #5d67e9 50%, #4451dc 51%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d67e9', endColorstr='#4451dc', GradientType=0);
    position: relative;
    z-index: 5;
}
b:before {
    content:'';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background-color: #4755E7;
    display: block;
    z-index: -1;
}