1. TOP
  2. デザイン
  3. 【コピペでOK】CSSのみで作る矢印ボタン(アニメーションあり)

【コピペでOK】CSSのみで作る矢印ボタン(アニメーションあり)

 2019/02/14 デザイン
この記事は約 3 分で読めます。 1,853 Views

今回はコピペしてすぐに使える、
CSSのみで作る「>」のような矢印ボタンをご紹介します。

矢印がつくことによって、ボタンだということがよりわかりやすくなりますね。

応用編としてマウスオーバーで矢印が動くアニメーションの設定もあわせてご紹介します。

【コピペでOK】CSSで作る矢印ボタン

このようなコードで、矢印を表現しています。

ポイントとしては.btn:afterに記述してあるこちらの部分です。

上と右に線を引き、45度回転させることで表現しています。

【応用編】矢印がマウスオーバーで動くアニメーション

See the Pen
矢印が動くボタン
by デザイナー・エンジニアでフリーランスを目指すならdainamo(ダイナモ) (@dainamo_jp)
on CodePen.

先ほどのコードにこちらのCSSを追加することによって矢印のアニメーションを表現しています。

ボタンの矢印の配置設定を right:5%;から:hoverのときにはright:3%;に変更する。

という表現で2%分右に移動しています。

さりげないアニメーションではありますが、ボタンであることがより一層わかりやすくなるかと思います。

さりげないアニメーションだからこと色々な場所で使うことができる技です。

まとめ

マウスオーバー時にボタンの背景色を変えたい場合などは

こちらに背景の色を指定してあげるとマウスオーバー時の色を変更することができます。

こちらではopacity:.75;と半透明にするエフェクトをかけています。

色々と応用が効く技なので、色々な場所でご活用ください。

 

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

  • コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法

関連記事

  • 【2019】フリー数字フォント。おしゃれで見やすいおすすめをまとめ。無料で商用利用可能。

  • ただ作品が並んでるだけではダメ?効果的なWEBポートフォリオサイトの作り方

  • デザインの意味とは何か。あらためて考えてみた。

  • 投稿記事や固定ページにサブタイトルを挿入できるWordPressプラグイン「WP Subtitle」の使い方

  • おすすめのフリー欧文(英語)フォント配布サイトまとめ。おしゃれで無料!【2019年最新】

  • 産業とデザインの歴史と遷移