我到达CSS的边界了吗？按钮在所有设备上工作。

Question

我正在重新设计网站，使其可在所有设备上访问。主要元素是按钮列表，这些按钮可以很容易地动画，但不能得到响应。请帮帮忙。

活动按钮可以看到这里 (在右上角禁用视频单击)

详细信息:1. 1.Title需要保持刚性，这样它就不会沿边框移动(为此，以前使用的位置:绝对值；)2.在悬停边界上，向内扩展+缩小，让我们在左侧和右侧进行10 on。3.标题位置在左边，箭头在右边。4.较小屏幕上的文字应打破，边框应保持流畅。

迄今为止的结果：http://codepen.io/anon/pen/VvmWgM

文本断线很好，边框沿着它移动，箭头位于右边。凉爽的。除了文本在悬停时移动，边框向外扩展。箭头不垂直对齐。

有什么好主意吗?如何调整按钮，让它们在现场起到示范作用？

提前谢谢你，

.container {
    float: none;
    margin-left: auto;
    margin-right: auto;

}
.floatleft {
  float:left;
  margin-right:20px;
}
.floatright {float:right;}
.clear {clear:both;}

.button-wrap {
  outline-style: solid;
  outline-width:4px;
  display:block;      
  padding:30px 20px;
  transition: all .12s ease;
}
.button-wrap:after {
  content: "";
  display: table;
  clear: both;
}
a.project-title {
  color:#000;
  font-size: 36px;
  font-weight: 400; 
  transition: all .4s ease;
  display: block;
  text-decoration:none;
}
.button-wrap:hover {
  outline-width:6px;
  margin:0 20px;

}
.button-wrap:hover a.project-title {
  font-weight: 700;
  transition: all .12s ease;
}
.arrow {
transition: all .4s ease;
margin-top: -4px;
  margin-right:20px;
  vertical-align:middle;
}
.button-wrap:hover  .arrow {
margin-right:0px;
}  

Answer 1

我为你准备了一些东西：http://codepen.io/woestijnrog/pen/YyNdQe。

我从零开始，所以你将不得不适应你可以使用的东西。为了避免文字回溯的恶作剧，我用了

box-shadow

和

 text-shadow

这似乎证实了你的四条规则。