hiloki
6/9/2013 - 3:59 PM

立体的（立体風）なボタン表現のパターン ref: http://qiita.com/items/1b97c9c0c13adc8f4ca7

立体的（立体風）なボタン表現のパターン ref: http://qiita.com/items/1b97c9c0c13adc8f4ca7

file3.css
content_copyfile_download
.btn{
  /* box-sizing: border-box; */
  border-color: transparent;
  background-color: transparent;
  border-style: solid;
  border-width: 8px 8px 16px 8px;
  border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAsBAMAAAD2lqe8AAAAJ1BMVEUaZJwcZZ0lbaJJga1Lga5Tn7taqMCCp8eDqMiP5N6q/+/i6/L////KlPzsAAAAnUlEQVQoz+2SoRHCUBBE9zq4JYEME0UJlJASaAMXTToAg41H5Lso6CARWxQmZP5RAIrn9s3OmT1Ir4YL5VWCZmbcBDW7Pi0Mp1KYNmtOaTh0GPcp416jPefiUaHpczGUYArwL34hLM7gsDiUw+KUDo9jG2jb7B2coOcPYwQJ+0QHCX6BY8wF2igqjFHUmKLooHCkEBQqnSA9105xkd4swUbH0UjqRQAAAABJRU5ErkJggg==) 8 8 16 8 fill repeat;
}
file2.css
content_copyfile_download
.btn{
  position: relative; 
}
.btn:after {
  display: block;
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -8px;
  z-index: -1;
  border-radius: inherit;
  height: 100%;
  background-color: #369;
}
file1.css
content_copyfile_download
.btn {
  border-bottom-width: 8px;
}
file0.css
content_copyfile_download
btn {
  box-shadow: 0 6px 0 #369;
}