ボタンデザイン – サンプル集

https://www.rural-web.com/coding/2489
目次

    はじめに

    本記事について

    本記事は、【ボタンデザイン】のサンプル集です。
    利用できる方は、お好きに活用してください。

    当サイトで公開している「ruralweb.css(準備中)」をご自身のサイトに読み込ませておけば、各サンプルに指定されているクラスを挿入するだけで再現できることを目標にしています。もし個々に利用する場合は、各サンプルのソースをコピペしてご利用ください。

    検証ブラウザ・OS

    サンプル内容につきましては、最新ブラウザ・OS(IE/Chrome/Safari/FireFox/iOS/Android)で検証しております。基本的にIE9以下などのブラウザでは検証しておりませんが、たまに適用していたり説明してあるところは仕事でやむなく対応した時のものです。

    注意事項

    自身の仕事効率化を目的としていますので、表示・不具合等による損失につきまして一切の補償をいたしませんのでご理解ください。但し、公開しているサンプル内容の修正・改善はできる限りしていきますので、お気づきの点がございましたら「お問い合わせ」もしくはTwitterよりご連絡ください。

    コードサンプル

    ベーシックタイプ

    基本型

    クラス名
    rw-btn-basic
    説明
    • レスポンシブ対応
    • aタグ推奨
    • 最大幅を設ける場合は、別途max-widthを指定
    コードを表示
    <a class="rw-btn-basic">ボタンサンプル</a>
    
    .rw-btn-basic {
    	display: block;
    	padding: 10px;
    	margin:0 auto;
    	text-decoration: none;
    	background-color: #1a73e8;
    	color: #FFF;
    	text-align:center;
    	cursor:pointer;
    }
    .rw-btn-basic:hover {
    	background-color:#2b7de9;
    	text-decoration:none;
    }
    
    最終更新:2019.10.10

    基本型:矢印付き

    クラス名
    rw-btn-basicarrow-in
    説明
    • レスポンシブ対応
    • aタグ推奨
    • ベーシック基本型rw-btn-basicと挙動は同じ
    • Font Awesomeの読み込み必須(Ver.4が使いやすいからVer.5は利用しない)
    • font-awesome.min.cssのCDNを<head>~</head>内に読み込ませる
    コードを表示
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <a class="rw-btn-basic arrow-in">ボタンサンプル</a>
    
    .rw-btn-basic {
    	display: block;
    	padding: 10px;
    	margin:0 auto;
    	text-decoration: none;
    	background-color: #1a73e8;
    	color: #FFF;
    	text-align:center;
    	cursor:pointer;
    }
    .rw-btn-basic:hover {
    	background-color:#2b7de9;
    	text-decoration:none;
    }
    
    .rw-btn-basic.arrow-in::after {
        font-family: 'FontAwesome';
        content: '\f105';
        margin-left:5px;
        font-size:20px;
    }
    
    最終更新:2019.10.10

    基本型:矢印付き:サイド

    クラス名
    rw-btn-basicarrow-side
    説明
    • レスポンシブ対応
    • aタグ推奨
    • ベーシック基本型rw-btn-basicと挙動は同じ
    • Font Awesomeの読み込み必須(Ver.4が使いやすいからVer.5は利用しない)
    • font-awesome.min.cssのCDNを<head>~</head>内に読み込ませる
    コードを表示
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <a class="rw-btn-basic arrow-side">ボタンサンプル</a>
    
    .rw-btn-basic {
    	display: block;
    	padding: 10px;
    	margin:0 auto;
    	text-decoration: none;
    	background-color: #1a73e8;
    	color: #FFF;
    	text-align:center;
    	cursor:pointer;
    }
    .rw-btn-basic:hover {
    	background-color:#2b7de9;
    	text-decoration:none;
    }
    
    .rw-btn-basic.arrow-side {
    	position: relative;
        padding: 10px 35px;
    }
    .rw-btn-basic.arrow-side::after {
        font-family: 'FontAwesome';
        content: '\f105';
        font-size:20px;
    	position: absolute;
    	top: 50%;
    	right: 10px;
    	-webkit-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    }
    
    最終更新:2019.10.11

    アニメーションタイプ

    シンプル:ふわっと

    クラス名
    rw-btn-anim-simple
    説明
    • -webkit-transitionでアニメーション。数値変更で速度変更可
    • レスポンシブ対応
    コードを表示
    <a class="rw-btn-anim-simple">ボタンサンプル</a>
    
    .rw-btn-anim-simple {
    	display: block;
    	padding: 10px;
    	margin:0 auto;
    	text-decoration: none;
    	background-color: #333333;
    	color: #FFF;
    	text-align:center;
    	cursor:pointer;
    	-webkit-transition: background-color .3s;
    }
    .rw-btn-anim-simple:hover {
    	background-color:#1a73e8;
    	text-decoration:none;
    }
    
    最終更新:2019.10.12

    シンプル:左からイン

    クラス名
    rw-btn-anim-left-in
    説明
    • レスポンシブ対応
    • 通常時に背景色を置けないのが難点
    • beforeに疑似背景をスタンバイさせている
    コードを表示
    <a class="rw-btn-anim-left-in">ボタンサンプル</a>
    
    .rw-btn-anim-left-in {
    	position:relative;
    	display: block;
    	overflow:hidden;
    	padding: 10px;
    	margin:0 auto;
    	text-decoration: none;
    	border:2px solid #1a73e8;
    	color: #1a73e8;
    	text-align:center;
    	cursor:pointer;
    	transition:color .2s ease-in-out;
    }
    .rw-btn-anim-left-in::before {
    	z-index:-1;
    	content: '';
    	position:absolute;
    	left:0;
    	top:0;
    	width:100%;
    	height:100%;
    	background-color: #1a73e8;
    	transform: translateX(-100%);
    	-webkit-transform: translateX(-100%);
    	transition:all .2s ease-in-out;
    }
    
    .rw-btn-anim-left-in:hover {
    	text-decoration:none;
    	color:#FFF;
    }
    .rw-btn-anim-left-in:hover::before {
    	transform: translateX(0);
    	-webkit-transform: translateX(0);
    }
    
    最終更新:2019.10.12

    シンプル:上からイン

    クラス名
    rw-btn-anim-up-in
    説明
    • レスポンシブ対応
    • 通常時に背景色を置けないのが難点
    • beforeに疑似背景をスタンバイさせている
    コードを表示
    <a class="rw-btn-anim-up-in">ボタンサンプル</a>
    
    .rw-btn-anim-up-in {
    	position:relative;
    	display: block;
    	overflow:hidden;
    	padding: 10px;
    	margin:0 auto;
    	text-decoration: none;
    	border:2px solid #1a73e8;
    	color: #1a73e8;
    	text-align:center;
    	cursor:pointer;
    	transition:color .3s;
    }
    .rw-btn-anim-up-in:hover {
    	color: #fff;
    	text-decoration:none;
    }
    .rw-btn-anim-up-in::before {
        position: absolute;
        z-index: -1;
        display: block;
        content: '';
    	top: -100%;
    	left:0;
    	width: 100%;
    	height: 100%;
    	background-color: #1a73e8;
    	transition:top .3s;
    }
    .rw-btn-anim-up-in:hover::before {
    	top: 0;
    }
    
    最終更新:2019.10.12

    シンプル:クローズ

    クラス名
    rw-btn-anim-close
    説明
    • レスポンシブ対応
    • 通常時に背景色を置けないのが難点
    • beforeafter両方に疑似背景をスタンバイ
    コードを表示
    <a class="rw-btn-anim-close">ボタンサンプル</a>
    
    .rw-btn-anim-close {
    	position:relative;
    	display: block;
    	overflow:hidden;
    	padding: 10px;
    	margin:0 auto;
    	text-decoration: none;
    	border:2px solid #1a73e8;
    	color: #1a73e8;
    	text-align:center;
    	cursor:pointer;
    	transition:color .6s;
    }
    .rw-btn-anim-close:hover {
    	color: #fff;
    	text-decoration:none;
    
    }
    .rw-btn-anim-close::before {
        position: absolute;
        z-index: -1;
        display: block;
        content: '';
    	top: 0;
    	left:0;
    	width: 100%;
    	height: 100%;
    	border-right: 40px solid transparent;
        border-bottom: 100px solid #1a73e8;
    	transition:all .6s;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    .rw-btn-anim-close::after {
        position: absolute;
        z-index: -1;
        display: block;
        content: '';
    	top: 0;
    	right:0;
    	width: 100%;
    	height: 100%;
        border-left: 40px solid transparent;
        border-top: 100px solid #1a73e8;
    	transition:all .6s;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    .rw-btn-anim-close:hover::before {
        -webkit-transform: translateX(-40%);
        transform: translateX(-40%);
    }
    .rw-btn-anim-close:hover::after {
        -webkit-transform: translateX(40%);
        transform: translateX(40%);
    }
    
    最終更新:2019.10.12

    シンプル:円

    クラス名
    rw-btn-anim-circle
    説明
    • レスポンシブ対応
    • 横幅固定させたほうがキレイかも
    • @keyframesを利用してアニメーションをつくる
    コードを表示
    <a class="rw-btn-anim-circle">ボタンサンプル</a>
    
    .rw-btn-anim-circle {
    	position:relative;
    	display: block;
    	overflow:hidden;
    	padding: 10px;
    	margin:0 auto;
    	text-decoration: none;
    	border:2px solid #1a73e8;
    	color: #1a73e8;
    	text-align:center;
    	cursor:pointer;
    	transition:color .2s;
    	transition-delay:0;
    	transition-property:color;
    }
    .rw-btn-anim-circle:hover {
    	color: #fff;
    	text-decoration:none;
    	transition-delay:.7s;
    	transition-property:color;
    
    }
    .rw-btn-anim-circle::before {
        position: absolute;
        z-index: -1;
        display: block;
        content: '';
    	top: 50%;
    	left: -20px;
    	width: 20px;
    	height: 20px;
    	background-color: #1a73e8;
        border-radius: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    
    }
    .rw-btn-anim-circle::after {
        position: absolute;
        z-index: -1;
        display: block;
        content: '';
    	top: 50%;
    	right: -20px;
    	width: 20px;
    	height: 20px;
    	background-color: #1a73e8;
        border-radius: 50%;
    	-webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }
    .rw-btn-anim-circle:hover::before {
    	-webkit-animation: rw-circle-left 1.2s both;
        animation: rw-circle-left 1.2s both;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
    .rw-btn-anim-circle:hover::after {
    	-webkit-animation: rw-circle-right 1.2s both;
        animation: rw-circle-right 1.2s both;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
    @keyframes rw-circle-left {
      0% {
        left: -20px;
      }
      50% {
        left: 50%;
        width:20px;
        height:20px;
      }
      100% {
        left: 50%;
        width:110%;
        height:300px;
      }
    }
    
    @keyframes rw-circle-right {
      0% {
        right: -20px;
      }
      50% {
        right: 50%;
        width:20px
        height:20px;
      }
      100% {
        right: 50%;
      }
    }
    
    最終更新:2019.10.12

    更新履歴

    更新日時 更新内容
    2019.10.12 「アニメーションタイプ」追加
    2019.10.11 「基本型:矢印付き:サイド」追加
    2019.10.10 記事作成