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

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

 2019/02/14 デザイン
この記事は約 3 分で読めます。 13,470 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で企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

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

  • 【html】selectタグの最初のoption(選択してください)を選ばせない方法

  • 【コピペでOK】期間を指定して表示・非表示するPHP関数

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

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

関連記事

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

  • 【2020】おすすめの明朝体のCSS(font-family)設定ときれいで読みやすくい書体の比較

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

  • 記事をコピー複製できるWordPressプラグイン「Duplicate Post」の使い方

  • 【2020年最新版】WEBサイトのデザインで参考にしたいギャラリーサイトまとめ

  • [font-smoothing] cssでフォントをきれいでなめらかに見せる方法