簡単なボタン・難しいボタンとは？
WEBデザイナーのともです。
僕は大学卒業してから８年間教育現場で小学生や中学生に理系科目を教えていました。ただ、デザインを作っていくより、僕のようにWEBデザイナーになる人の役に立てたら幸いです。
前回より日が空いてしまい申し訳ございませんでした。。。
案件が大量でして、なかなか投稿する時間がなく、夜中の2時に記事を書いておりますｗｗｗ
前置きはここまでにし、今回は「難しいボタンと簡単なボタン」を実際に作ってみて、解説していきたいと思います！
３つのボタン
パターン１
パターン２
パターン３
さて、この3つの中でコーディングが難しいのはどれでしょうか？
正解は解説したあと！
使用しているアイコンはコチラです。
アニメーションの制作
アニメーションを制作する中で、最も大変なのは
美しく見せ、デザイナーさんが作ってくれたデザインをもっと美しく見せる動きを加え、相乗効果をもたらすことです。
逆に言えば、デザインを台無しにしてしまうこともあるということです。
アニメーション制作を今回担当してくれた方は、バックエンドをメインに制作しているエンジニアの方で、相当苦労されたようです。
普段は、phpをメインに書いているので、アニメーションはまるで素人まで行きませんが、あまり得意ではないとのこと。
アニメーションの制作が得意なエンジニアはフロントエンドエンジニアでWEBアプリやアンドロイドアプリのシステム構築をしているバックエンドエンジニアでは、同じエンジニアでも全く特性が違います。
とはいえ、プロジェクトにフロントエンドエンジニア、バックエンドエンジニア、デザイナーなどそれぞれ得意とする人員がそろって制作することはほとんどありません。
よって、今回お伝えしたいことは
見栄えが良くて、簡単に作れるボタンを紹介できたらいいなって思いました！
ボタンパターン１の解説
このボタンが一番簡単でとっても作りやすいボタンです。
特徴と作り方は、、、
マウスホバー(:hover)時にボタンの文字色と背景色を変えあげる。
「transition」を加えてあげることで、色が瞬時に切り替わらず、
設定した時間をかけて変化していくので、画面表示にやわらかさが出てきます。
また「cursor: pointer;」をつけると、マウスアイコンが変わるので、
より一層ボタン感が出てきます。
ボタンパターン２の解説
このボタンが一番難しいボタンです。
特徴と作り方は、、、
本来枠線を作るときは「border」を使いますが、今回は動きを作りたいのでsvgとrectタグを使って角丸四角形を作ります。。
あとはマウスホバー「stroke-dasharray」と「stroke-dashoffset」の値を変えて四角形を下線に変えてあげればできるが、このあたりはsvgとrectの知識が無いと理解が難しいです。。
かっこいいサイトにありそうなアニメーションですが、シンプルな動きに見えて作るのが大変なボタンです。
ボタンパターン３の解説
特徴と作り方は、、、
マウスホバー(:hover)時にボタンの背景色だけでなく、
1.2倍に拡大「transform: scale(1.2);」と影「box-shadow」を
付けてあげる。
それに加え、マウスホバー時に中のアイコン(iタグ)の色の変化と
回転「transform: rotate(180deg);」
まとめ
ボタン1つでとても大変になることもありますね！
私はUIデザイナーなので、大きな動きを加えるアニメーションを制作することはあまりありません。
ただ、アニメーションを沢山使う、コーポレートサイトやランディングページを作る事もあるかもしれないのでいい勉強になりました。
制作がとっても簡単なのは「ボタンパターン１」
制作が最も難しいのは「ボタンパターン２」でした。
もちろんこれがすべてではありません。
他の作り方もあると思いますので参考にしてみて下さい。
コードの紹介
ボタンパターン１
html
<body>
<div class="wrapper">
<div class="btn_area">
<div class="btn_number">①</div>
<div class="btn">
<span>お申込みはこちら</span>
</div>
</div>
</div>
</body>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
margin: 20px 50px;
}
.btn_area {
text-align: center;
}
.btn_area .btn_number {
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}
.btn_area .btn {
display: inline-block;
padding: 1em 4em;
background-color: #00D0D0;
color: #FFF;
border: 1px solid #00D0D0;
border-radius: 2em;
text-align: center;
word-break: keep-all;
}
.btn_area .btn:hover {
transition: all 0.3s;
background-color: #FFF;
color: #00D0D0;
cursor: pointer;
}
ボタンパターン２
html
<body>
<div class="wrapper">
<div class="btn_area">
<div class="btn_number">②</div>
<div class="btn">
<svg width="277" height="62">
<rect x="5" y="5" rx="25" fill="none" width="266" height="50"></rect>
</svg>
<span>お申込みはこちら <i class="fa-solid fa-angle-right"></i></span>
</div>
</div>
</div>
</body>
</html>css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
margin: 20px 50px;
}
.btn_area {
text-align: center;
}
.btn_area .btn_number {
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}
.btn_area .btn {
position: relative;
display: inline-block;
width: 277px;
height: 62px;
text-align: center;
background-color: transparent;
cursor: pointer;
}
.btn_area .btn svg {
position: absolute;
top: 0;
left: 0;
}
.btn_area .btn svg rect {
stroke: #7A9900;
stroke-width: 2;
stroke-dasharray: 353, 0;
stroke-dashoffset: 0;
transition: all 0.5s ease;
}
.btn_area .btn span{
position: absolute;
top: 19px;
left: 0;
right: 0;
color: #7A9900;
}
.btn_area .btn:hover svg rect {
stroke-width: 4;
stroke-dasharray: 196, 543;
stroke-dashoffset: 437;
}
ボタンパターン３
html
<body>
<div class="wrapper">
<div class="btn_area">
<div class="btn_number">③</div>
<div class="btn">
<span><i class="fa-solid fa-gear"></i></span>
</div>
</div>
</div>
</body>css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
margin: 20px 50px;
}
.btn_area {
text-align: center;
}
.btn_area .btn_number {
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}
.btn_area .btn {
display: inline-block;
width: 5rem;
height: 5rem;
padding: 1rem;
background-color: #EFBE74;
color: #FFF;
border: 1px solid #EFBE74;
border-radius: 50%;
text-align: center;
word-break: keep-all;
transition: transform 0.5s;
transform: scale(1);
}
.btn_area .btn i {
transition: all 0.5s;
font-size: 3rem;
color: #FFF;
transform: rotate(0);
}
.btn_area .btn:hover {
transition: all 0.5s;
background-color: #FFF;
transform: scale(1.2);
box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.btn_area .btn:hover i {
transition: all 0.5s;
transform: rotate(180deg);
color: #EFBE74;
}
コードの取り扱いについて
コードは自由に使っていただいて構いません。
しかし、案件等で使用した場合、いかなる不具合が発生しても責任をとりません。よって自己責任でご使用ください。
また、勉強用として制作しているので自分が作ったと偽って営業しないようお願い致します。
次回はWEBページを1本作ったのでそちらを解説していきます！
この記事が気に入ったらサポートをしてみませんか？