Pixel Pushing on button element

押した時に下に1pxずらすやつ色々。

padding

.padding button {
  padding-top: 8px;
  padding-bottom: 10px;
  line-height: 1;
}

.padding button:active {
  padding-top: 9px;
  padding-bottom: 9px;
}

position

.position button:active {
  position: relative;
  top: 1px;
}

position #2

.position-2 button {
  box-shadow: 0 1px 2px #666;
}

.position-2 button:active {
  box-shadow: 0 0 1px #666;
  position: relative;
  top: 1px;
}

line-height

.line-height button {
  height: 1.75em;
  line-height: 1.75;
  overflow: hidden;
}

.line-height button:active {
  line-height: 1.833;
}

text-shadow

.text-shadow button:active {
  color: transparent;
  text-shadow: 0 1px 0 #666, 0 2px 0 rgba(255, 255, 255, 0.8);
}