3D六边形按钮

Question

我正在帮助一位朋友设计一个网站，她有一个非常具体的按钮类型要求：

“我想要六边形的按钮，中间有一张照片，在点击后会向下凹陷，然后跳转到作品集页面。”

我已经成功地使用CSS和HTML创建了一个圆角正方形的按钮，但是我无法制作出六边形的按钮。是否有人能在这里提供帮助？

Fiddle

HTML:

<a href="#" class="button">
<span>
<p> Jorgie</p></span>
</a>

CSS：

.button {
display: inline-block;
margin: 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:    0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-moz-box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
-moz-transition: -moz-box-shadow .1s ease-in-out;
-o-transition: -o-box-shadow .1s ease-in-out;
transition: box-shadow .1s ease-in-out;
font-size: 20px;
color: #fff;
}

.button span {
display: inline-block;
background-color: black;
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
font-family: 'Pacifico', Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
-webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-    out;
-moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
-o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}

.button:hover span {
background-image:url(jorgie.jpg);
background-repeat:no-repeat;
background-position:center;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8);
}

.button:active, .button:focus {
-webkit-box-shadow:    0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
box-shadow:    0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
}

.button:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}

- Hannah

---

你能否发布一下你制作的圆角正方形的代码，这将有助于我们理解你的目标以及你所说的“压低”的含义。 - web-tiki

已添加，谢谢。请在 http://jsfiddle.net/64t56/1/ 上查看示例。 - Hannah

我时间不多，但我已经做到了这一步：http://jsfiddle.net/webtiki/y7bCG/1/ - web-tiki

谢谢，我会试着玩一下那个 :) - Hannah

Answer 1

这是一个六边形的按钮，参考了这个问题中描述的解决方案：Button with pointed edges and shadow：

六边形使用倾斜的伪元素制作，阴影使用盒子阴影制作，点击事件上的过渡效果使用CSS实现：

演示

HTML ：

<div class="button top">
    <div class="button bottom"></div>
</div>

CSS :

.top{
    position:relative;
    top:0;
    margin-left:150px;
    width: 45px;
    height: 60px;

    -webkit-transition: top .1s;
    -ms-transition: top .1s;
    transition: top .1s;
}
.button:before, .button:after{
    position: absolute;
    width:70%; height:50%;    
    content: "";  
    z-index:-1;
}
.top:before {
    left:0; top:0;
    -webkit-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
    background: #469BF9;
    box-shadow: -5px 10px 0px -5px #104f96;
    z-index:-2;
}
.top:after {
    right:0; top:0;
    -webkit-transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    transform:skewX(20deg);
    background: #469BF9;
    box-shadow: 5px 10px 0px -5px #104f96;
    z-index:-2;
}
.bottom:before{
    left:0; top:50%; transitions.
    -webkit-transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    transform:skewX(20deg);
    background: #1E80F7;
    box-shadow: -4px 5px 0px 0px #104f96;
}
.bottom:after{
    right:0; top:50%;
    -webkit-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
    background: #1E80F7;
    box-shadow: 4px 5px 0px 0px #104f96;
}

.button:after, .button:before{
    -webkit-transition: box-shadow .1s;
    -ms-transition: box-shadow .1s;
    transition: box-shadow .1s;
}
.top:active{
    top:5px;
}
.button:active:after, .button:active:before, .button:active .button:before, .button:active .button:after {
    box-shadow: 0px 0px 0px 0px #104f96;
}

- web-tiki

---

非常感谢！太棒了！ - Hannah

Answer 2

据我所知，要创建一个带有完整图像的六边形需要使用多个div，如下所示。 JSfiddle演示 HTML

<div class="hexagon">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <a href="#"></a>
        </div>
    </div>
</div>

CSS

.hexagon {  
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
  width: 400px;
  height: 200px;
  margin: 25px;
  visibility: hidden;
  overflow: hidden;      
}

.hexagon-in1 {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
  overflow: hidden;  

}

.hexagon-in2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url(http://placekitten.com/241/241);
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.hexagon-in2 a {
  display: block;
}

实际的“按下按钮”效果可能会更加困难。坦白地说，我会选择在这里使用实际的图像，而不是使用不太语义化的 div 标签来样式化此按钮。

- Paulie_D

Answer 3

对于六边形按钮，这里有一个FIDDLE

。

<div id="hexagon"></div>

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}

- Milan and Friends