Breaking News
Home / デザイン / HTML/CSS/Javascript / 【やさしく解説!】CSSで多角形のボタンを作成する方法

【やさしく解説!】CSSで多角形のボタンを作成する方法


%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-21-02-09

webサイトなどを作るにあたって、ボタンの作成は欠かせません。

最近ではデザインの幅が広がってきて、少しドキッとするようなアニメーションのかかっているボタンを見たことがある人もいるのではないでしょうか?

そこで今回は少し珍しい多角形のボタンをCSSで作成してみます。

 

実装方法

他にもやり方はある気がしますが、今回はcssの擬似要素を使って実装していきます。

初めは六角形のボタンを作成しましょう。

 

デモ

デモ

html

 

css

 

六角形ボタンはどんな仕組みなのか?

まずは6角形を三つの要素に分解してみましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-17-58-14

上の部分がbefore要素。下の部分がafter要素になります。

真ん中の長方形の部分はシンプルに縦と横の長さを指定すれば実装できますね。

なおpositionプロパティはrelativeに設定しましょう。

そして問題の三角形の部分ですね。

 

三角形はボーダー要素の境界線の部分の性質を使って実装していきます。

元の部分の要素のwidthとheightを0にして

 

としましょう。

border-left border-rightの部分は透明するtransparentに設定しているので、該当部分を切り抜いたようになってます。

 

同じようにafter要素の下の三角形はboder-topにすれば、三角形の方向を変更できます。

あとは要素の大きさに応じて、absolute要素の位置を指定すれば、三つの図形が組み合わさりますね。

hover要素でアニメーションをつけるとまた少しボタンっぽくなります。

 

八角形と吹き出しボタンの実装方法

ちなみに擬似要素をうまく組み合わせれば他にも、

八角形吹き出しのような図形のボタンも作成できます。

デモ

html

 

css

八角形ボタン

八角形は元の要素、before要素、after要素の三つで構成されています。

元の要素は六角形と同じように長方形を作成しましょう。

before要素、after要素は台形を表現する必要があります。

before要素の場合は下のようなコードで台形を作成できます。

ここでのポイントはwidth要素が0pxでないことですね。width要素を設定することで、三角形ではなく、台形を表現することができます。after要素も同じように台形を作成すればOKです。

吹き出しボタン

吹き出しボタンのはborder-radius要素を追加している長方形と、after要素で構成されています。

after要素の三角形はposition要素で右下に配置しているのポイントです。

まとめ

いかがだったでしょうか?

擬似要素を使うと色々な図形のボタンを作成することができるので、是非覚えておきましょう。

 

 

 


About Goto

Goto
ビールが大好きな大学生です。夢はベルギーで朝から晩までビールを飲むことです。どうぞよろしくお願いします。

Check Also

unity

初心者必見!Unityの「uGUI」を使って実際にUIを制作してみよう!

Unity初心者の皆さん、UI …