Pixel Pushing

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

padding

Push Me!

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

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

position

Push Me!

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

position #2

Push Me!

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

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

line-height

Push Me!

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

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

text-shadow

Push Me!

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