CSSでボタンを斜めにデザインして上だけ角度をつける

某ゲームでボタンを斜めにデザインして使用しているのがとても気になり「CSSでこのボタンはどうやって作ることができるんだろう？」と興味が出たので作成してみたくなりました。以下画像の黄色いボタンのように。

ボタンは向かい合う上下の辺が平行の斜めではなく、斜めのボタンの上辺だけには角度がついて少し右上斜めのボタンデザインになってます。作成してみました。

1. CSSでボタンを斜めにデザイン
- 1.1. 元になるボタンを作る
- 1.2. transform:skewで斜めにデザイン
2. ボタンパーツで斜めのボタンを作る
- 2.1. ポジションでボタン位置を合わせる
- 2.2. transform:rotateで角度を調整
3. CSSの擬似要素でボタンを斜めにデザイン
- 3.1. beforeでボタンを斜めにする
- 3.2. ボタンの重なりをz-indexで調整
4. まとめ

CSSでボタンを斜めにデザイン

CSSでボタンを斜めにデザインする場合には、ボタンを斜めにするための元になる四角のボタンを作成して、作成した四角ボタンを斜めのボタンへと変形させます。

そして斜めにデザインしたボタンの上だけ(上辺)には、さらに斜めに角度をつけて傾きを加えることで、向かい合う2組の辺が平行になるボタンではなく、右斜め上がりのボタンデザインにすることができます。

まずはCSSで元になるボタンの作成と、ボタンを斜めに変更する作り方のところまでを進めます。

元になるボタンを作る

CSSで「ボタンを斜めにデザインするために」そして「斜めにデザインした上(上辺)だけ角度をつけるために」元になるボタンを作る作業からスタートです。

<div class="btn-parent">
　<a href="#">準備OK?</a>
</div>

CSSでボタンを斜めにするHTMLは、div要素にクラスをつけて、divの子要素にaタグでリンクした要素をマークアップしたものを元になるボタン要素にします。

そしてボタン要素に指定するCSSです。

.btn-parent{
　background:deeppink;
　width:250px;
　margin:0 auto;
　padding:20px;
　position:relative;
　text-align:center;
　border-bottom:3px solid #333;
}
.btn-parent a{
　text-decoration:none;
　color:#333;
　font-weight:bold;
　transition-duration:1s;
}
.btn-parent a:hover{
　color:greenyellow;
　transform:rotate(360deg);
}

ボタン背景色、ボタン幅、ボタン位置、パディングの余白、ボタンの中のリンクしてるリンクテキスト(文字)の色をそれぞれのCSSのプロパティと値で指定してボタンデザインを整えます。

デザインと言っても今回はボタン下に3pxのボーダーを加えてるくらい。

そしてボタンに使用してるaタグのリンクの下線を消して、リンク文字の色と太さも指定します。

transition-duration:1s;の記述は、ボタンがホバー時のときにリンクテキストが回転するようにしたくて指定してます。

aタグはディスプレイ指定しないとインラインの要素です。インラインのままだとホバーのときに動いてくれないため、display:inline-block;またはblockを指定しておきます。

こうしてCSSでごにょごにょと上記の説明のようにCSSでボタンをデザインすると平凡なボタンデザイン、つまりこれからボタンを斜めのデザインにする元になるボタンに仕上がります。

transform:skewで斜めにデザイン

CSSで四角のボタンを変形させて斜めのボタンにデザインにします。

CSSでボタンを斜めにデザインするにはtransformプロパティのskew関数を指定した値で斜めボタンにできます。

transform:skew(-20deg)

ボタンの形を斜めに変形させるので、元になる四角ボタンをデザインした要素にtransform:skewを指定します。

.btn-parent{
　background:deeppink;
　width:250px;
　margin:0 auto;
　padding:20px;
　position:relative;
　text-align:center;
　border-bottom:3px solid #333;

　transform:skew(-20deg)

}

.btn-parent a{
　text-decoration:none;
　color:#333;
　font-weight:bold;
　transition-duration:1s;
}

.btn-parent a:hover{
　color:greenyellow;
　transform:rotate(360deg);
}

CSSでtransform:skew(-20deg)をボタン要素に指定すると、上の画像のように四角ボタンだったデザインは、skew関数の値の(-20deg)で右斜めに20度傾いたボタンデザインを作ることができます。

skew関数の値を正の値(20deg)にした場合は、左斜めに傾いた斜めボタンにデザインできます。

ボタンパーツで斜めのボタンを作る

CSSのtransformプロパティのskewで四角形のボタンから斜めのボタンにすることができましたが、斜めと言っても、まだ向かい合う2組の辺が平行の斜めボタンです。

今回は斜めの向かい合う2組の辺のうち、ボタン上辺は向かい合う下辺と平行にならない角度をつけた斜めのボタンデザインにします。

そのためには、ボタンの上だけに使用するボタンパーツの要素を作り、ボタンパーツを個別にデザインできるようにして、ゲームで見た斜めのボタンデザインにします。

知識不足なため私が苦戦したのはこの辺りからです。

ポジションでボタン位置を合わせる

CSSでデザインしたボタンのdiv要素の上にでもdiv要素にクラスをつけて追加し、ボタンの上に位置が来るようにCSSで位置を合わせます。

<div class="btn-top">.</div>
<div class="btn-parent">
　<a href="#">準備OK?</a>
</div>

追加するdivに点をつけてますが、テキストがないとボックスが表示してくれなかったのでCSSで斜めにしたら隠すことができる点を使ってます。

.btn-top{
　width:289px;
　background:deeppink;
　border-top:2px solid #333;
　position:relative;
　top:17px;
　left:12px;
　margin:auto;
}

CSSは斜めにしたボタン要素の上にマークアップしたdivのクラスでセレクタを指定して、上辺部分の要素の背景色と幅を指定しボタンに繋げるパーツにします。

そしてposition:relative;を記述しておき、ボタンとの位置を合わせられるようにしておきます。

ボタンパーツ要素の位置を合わせるのはtopとleftでボタン本体の要素の上に位置を移動させます。

このときwidthで指定したボタンパーツの幅の調整や位置合わせは、だいたいの位置でボタン本体に合わせておき、このあと上辺のボタンパーツを斜めにして角度を微調整するときに位置をしっかり合わせます。

transform:rotateで角度を調整

CSSでボタンパーツとして作成したdiv要素をボタン上辺のだいたいの位置に合わせたら、斜めにして角度調整をします。

transform: skew(-20deg)rotate(-2deg);

.btn-top{
　width:289px;
　background:deeppink;
　border-top:2px solid #333;
　position:relative;
　top:17px;
　left:12px;
　right:0;
　margin:auto;

　transform: skew(-20deg)rotate(-2deg);

}

ボタン本体を斜めにデザインしたように、transformプロパティでskew関数を指定し、値で斜めにします。またrotate関数でボタンパーツ自体にも角度をつけて斜めにします。

ボタン本体とボタンパーツの位置の骨組みイメージは以下の画像のようになります。

あとはボタン本体にボタンパーツの位置を合わせるために、widthで幅、rotateで角度、topとleftで位置をずらしながら、微妙にずれるボタン本体との位置を値で調整して背景色を統一すればボタンデザインの完成です。

作成したボタンは上辺で使うボタンパーツの角度や斜めにする向きを変えることで以下の画像のようにボタンを変形させることができます。

CSSの擬似要素でボタンを斜めにデザイン

CSSでボタンを斜めにデザインして上だけ角度をつけることができたボタンは完成なのですが、CSSのbeforeでもボタンを斜めにデザインすることができます。

先述してきたボタンデザインと同じなのと、記事が長くなってしまったので、CSSの擬似要素でボタンを斜めにデザインするのに必要だった記述に絞って説明します。

beforeでボタンを斜めにする

CSSの擬似要素でボタンを斜めにする場合のHTMLは以下のようにdiv要素をマークアップしてaタグでリンクボタンになるようにします。

<div class="btn"><a href="#">準備OK?</a></div>

CSSはボタンのデザインをするdivのクラス名でセレクタにしてボタンの幅や高さ、背景色、余白を持たせます。

このときボタン要素にはtransform:skewでボタンを斜めにしておきます。

また擬似要素の基準位置がボタン要素になるようにposition:relative;を指定します。

以下のCSSだと、ここまでの記述は.btnセレクタの部分です。

.btn{
　display:block;
　width:300px;
　height:50px;
　background:deeppink;
　margin:0 auto;
　transform:skew(-20deg);
　position:relative;
　text-align:center;
　border-bottom: 3px solid #333;
}

.btn::before{
　background: deeppink;
　display:block;
　width: 280px;
　height:20px;
　padding:10px;
　position: absolute;
　content: "";
　top:-27px;
　left:0px;
　transform: skew(-3deg)rotate(-4deg);
　border-top: 3px solid #333;
}

次にボタンのデザインで上辺部分で使うボタンパーツを擬似要素のbeforeで作ります。(上記コードでは.btn::before部分)

contentプロパティの値を空で指定して、relativeを基準にして位置調整ができるようにposition: absolute;を指定します。

この段階で擬似要素のボタンパーツがボタン要素の上に乗ると思うので、topとleftを記述し、値でボタン上部に位置を移動します。

そしたらtransform: skew(-3deg)rotate(-4deg);のように、擬似要素のbeforeで作成したボタンのパーツをskewで斜めにして、rotateで角度を調整します。

ボタンの重なりをz-indexで調整

CSSでボタンを斜めにするデザインを今回のように擬似要素のbeforeで作成した場合は、上の画像のようにリンクテキストが擬似要素で作ったボタンパーツに重なってしまいます。

リンクテキストが前面に来るようにz-indexを使い重なりを調整します。

CSSの擬似要素でボタンを斜めにデザインした記述の説明が最後なので、z-index:-1;も指定した全てのコードが以下です。

.btn{
　display:block;
　width:300px;
　height:50px;
　background:deeppink;
　margin:0 auto;
　transform:skew(-20deg);
　position:relative;
　text-align:center;
　border-bottom: 3px solid #333;
}

.btn::before{
　background: deeppink;
　display:block;
　width: 280px;
　height:20px;
　padding:10px;
　position: absolute;
　content: "";
　top:-27px;
　left:0px;
　transform: skew(-3deg)rotate(-4deg);
　border-top: 3px solid #333;

　z-index:-1;

}

.btn a{
　display:block;
　color:#333;
　font-weight:bold;
　text-decoration:none;
}

.btn a:hover{
　transform:rotate(360deg);
　transition-duration:1s;/*滑らかに*/
　color: greenyellow;
}

z-index:-1;をボタンのパーツにした擬似要素の.btn::beforeセレクタの中に加えます。

そうすることで、ボタンを斜めにデザインして上だけ角度をつけたボタンデザインに仕上がります。