WordPressの記事が続いたのでCSSの記事をひとつ。ただ浮いているたけじゃつまらないのでCSSアニメーションとアイコンフォント（FontAwesome）を組み合わせた例を紹介します。

影（box-shadow）の角度やサイズを変更することで、いろいろな表現ができたりしたり、しなかったり。

なお、ボタンに付いてるアイコンフォントはbeforeなどの擬似要素で生成しています。

動作サンプルページ

実際のボタンサンプルはこちら

サンプル01

よくありがちなタイプ。影にぼかしはなし。

CSS

.floatingBtn01 {
  position: relative;
  display: block;
  width: 300px;
  padding: 10px;
  background: #0075a9;
  color: white;
  text-decoration: none;
  text-align: center;
  box-shadow: -8px 8px 0px -2px rgba(0, 0, 0, 0.25);
  transform: translate(10px, -10px);
  transition: all .5s ease;
}
.floatingBtn01::before {
  margin-right: .25em;
  font-family: 'FontAwesome';
  content: '\f0a9';
}
.floatingBtn01:hover {
  background: #0c597a;
  box-shadow: 0 0 0 0 black;
  transform: translate(0, 0);
}

サンプル02

サンプル01の影をぼかしたタイプ。

CSS

.floatingBtn02 {
  position: relative;
  display: block;
  width: 300px;
  padding: 10px;
  background: #0075a9;
  color: white;
  text-decoration: none;
  text-align: center;
  box-shadow: -5px 5px 5px -2px rgba(0, 0, 0, 0.25);
  transform: translate(10px, -10px);
  transition: all .5s ease;
}
.floatingBtn02::before {
  margin-right: .25em;
  font-family: 'FontAwesome';
  content: '\f0a9';
}
.floatingBtn02:hover {
  background: #0c597a;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.75);
  transform: translate(0, 0);
}

サンプル03

真正面タイプ。奥行きを表現。

CSS

.floatingBtn03 {
  display: block;
  width: 300px;
  padding: 10px;
  background: #0075a9;
  color: white;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.45);
  transition: all .5s ease;
}
.floatingBtn03::before {
  margin-right: .25em;
  font-family: 'FontAwesome';
  content: '\f0a9';
}
.floatingBtn03:hover {
  background: #0c597a;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.75);
  transform: scale(0.93, 0.93);
}

見直してみたらあんまり浮いてるように見えない？