大漠发文说过的一道CSS实现题

button.md

.button {
  margin: 80px 0 0 80px;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 60px;
  font-size: 26px;
  font-weight: bold;
  font-family: arial;
  color: #555;
  padding: 0 60px;
  letter-spacing: -2px;
  background: #c7c7c7;
  text-shadow: 0 1px 0 #DEDEDE;
  border-radius: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 2px #616161, 0 0 0 6px #CBCBCB, 0 0 0 8px #fff, 0 0 0 10px #666, 0 5px 7px 7px #D1D1D1, inset 0 28px 0 rgba(255, 255, 255, .2);
  position: relative;
}

.button:before,
.button:after{
  content: '';
  position: absolute;
  display: block;
  background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAYABgDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAcJCv/EACgQAAEEAQMDBAIDAAAAAAAAAAQBAgMFBgAHExESFAgVFiFRsSIjMv/EABYBAQEBAAAAAAAAAAAAAAAAAAQCA//EACIRAQEAAwABBAMBAQAAAAAAAAECAxESIQAEEyIjMUIzQf/aAAwDAQACEQMRAD8A6qvNb+P3rP8Am32a31uQUKEs+Osx9dq3Lyrwe8Tq3IOdrEXopq5K0fHndeio1jmp9/6mXqA2Nc2svtxduMkOx320Yq6yPCjcgPhq5R4WPIsLHETiy3eLMiJIVLjFgQrJXczMdMWSSvxtudCkEKR5azzKVzeR5Kyv8jn7+Tn5u7k5uT+zk7u/v/l3d33qMdfmx3ZpxFt4h8vzY7w9TZ4ZcV5pmuU6ftJeOoKufxZJlUy8E3+g+PJGYLje+pyxhU6Z0Om5qb9dMnmt/H701lZ6ftjHE1lHuLuRkp+QQ2Q8NtjuEg5CdLXKPKiSBWGX2AhjVlVU7SYcYriGva7hbkB0DojsdIaVMYDZny5oo/nDgx5ifKJdX7n24UfvUdh+qqbGA1XmrTgx4bhN9Zs2TFs/4wR7fO1L5Sq42aqSpqaaXvDQ5lnmIfD8QEY59/a14l3cGEtCpqCkgfJYEWFucqPfAO+YMcZkA8JJp7pXAgCmHTjhkTxvpV2tTEvjzrS7dlqyeQu4iPegrDEYsaAsxBZEHdi/31ejyfkzyEbZNs4Ru7GXNNH5Dudf6E3VbSzTUEzRpmT4ytHlqr6alJE7Xh34hqSf4V5pup/qkola2cxASM79UDZvHszwDEpMOy4WLpR29hBQXQBPmUt/SkujsIzak1yRSyxRlFkxSjlDCGgLxhHhiGwziwtNNXa1T07R5adbpj6d1rQ3fPVoA2qAOjOQJNGh++vOp7+7M72ky1zIqkgK636//9k=');
  top: 18px;
  left: 17px;
  height: 24px;
  width: 24px;
}
.button:after{
  left: auto;
  right: 17px;
}

实现