[CSS]実装のアイデアが面白い！枠線から背景をずらして配置するスタイルシート

枠線から背景をずらして、ゆる〜い感じにデザインされたスタイルシートを紹介します。

HTMLはbutton要素一つで実装されており、二つの要素をマイナスマージンで強引に重ねるとかの荒技ではないです。

実際の動作は下記ページで確認できます。
デモはボタンですが、見出しやロゴなどに使っても面白そうですね。

デモページ

実装は、こんな感じです。

HTML

button要素一つで実装します。divなど他の要素に変更してもOKです。
色の違いはclass指定で。

<button class="yellow">
  View More
</button>

<button class="blue">
  View More
</button>

CSS

枠線は通常通りbutton要素にスタイルし、ずらした背景は疑似要素の:afterを使います。
ちょっとだけ傾けるのがポイントです。

body {width:70%;text-align:center;margin:40px auto;}

button {
  position:relative;
  margin:10px;
  display:inline-block;
  padding:8px 25px 8px 25px;
  border:2px solid #c69d18;
  background:none;
  text-transform:uppercase;
  font-family:sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  cursor:pointer;
}

button:after {
  position: absolute;
  top:2px;
  left:-4px;
  content:"";
  height:100%;
  width:100%;
  z-index:-999;
  -webkit-transform: rotate(-1deg);
     -moz-transform: rotate(0deg);
}

.yellow:after { background:#f4ec5a; }
.blue:after   { background:#00a1cb; }
.green:after  { background:#19dd89; }
.pink:after   { background:#d31996; }

アイデアの元となったのは、下記のサイトのロゴだそうです。

Freshboss.com