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

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

2019/10/15

はじめに

本記事について

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

当サイトで公開している「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	記事作成