こんにちは。
カトパンです。
「あ、今日はカトパンって言うんやー」って思っていただいた方!笑
いつも読んでいただいてありがとうございます^^
今日は下のようなお問い合わせボタンの作り方をみなさんに
教えようと思います。
もーーー押したくてたまらんですよね(笑)
さ、早速作っていきましょう!すぐ作れます。
![スクリーンショット 2016-07-20 17.52.40](http://design-school.jp/wp/wp-content/uploads/2016/07/d0b3a16a6381e379c9a39e807179a679-300x178.png)
①角丸長方形ツールを使い、幅300px、高さ70px、半径を5pxにし角丸長方形を作ります。
色は何でも構いませんが、今回は#00a1f2としました。
![スクリーンショット 2016-07-20 17.57.35](http://design-school.jp/wp/wp-content/uploads/2016/07/dc845f4e91bffaf00cffd9abbc1f2867-300x202.png)
②文字を入れてください
この時点でもまあまあきれい。
![スクリーンショット 2016-07-20 17.58.47](http://design-school.jp/wp/wp-content/uploads/2016/07/e2faaeeb25bb729305b68edb12fba459-300x201.png)
③ ①で作った角丸を複製し、①の下に配置する。
![スクリーンショット 2016-07-20 17.47.36 1](http://design-school.jp/wp/wp-content/uploads/2016/07/58cce3736b3cea12e0a2dd07e5653696-300x291.png)
④ ③の色をカラーオーバーレイで①より少し暗め(今回は#007bb9)にしたら、
矢印ボタンの↓を3回ほど押して、下にずらします。完成です。早っ!笑
![](http://design-school.jp/wp/wp-content/uploads/2016/07/button01-1-300x75.jpg)
お疲れ様でした!
ちなみにこのボタンを押すとスクールのお問い合わせページに飛びます(笑)
また次回新たなボタンの作り方を教えますねー^^
それでは!
コメントを残す