HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-14.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="pushcircle">7-1-14</a>
CSSの書き方
/*== 押し込む円 */
.pushcircle{
/*周囲の線の起点とするためrelativeを指定*/
position: relative;
/*円の形状*/
width:100px;
height:100px;
box-sizing: border-box;
padding: 0 10px;
text-align: center;
background:#333;
border-radius:50%;
color: #fff;
text-decoration: none;
outline: none;
/*天地中央にテキストを配置*/
display: flex;
align-items: center;
justify-content: center;
}
/*内側の線*/
.pushcircle:after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
top: 50%;
left: 50%;
/*線の形状*/
width: 85%;
height: 85%;
border: 2px solid #333;
border-radius: 50%;
transform: translate(-50%, -50%) scale(1.1);
/*アニメーションの指定*/
transition: .3s ease;
}
/*hoverをしたら枠線が小さくなる*/
.pushcircle:hover:after {
transform: translate(-50%, -50%) scale(1);
border-color:#fff;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-12.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnripple2"><span></span></a>
CSSの書き方
/*== 無限に波紋が広がる */
.btnripple2{
/*波紋の基点とするためrelativeを指定*/
position: relative;
/*波紋の形状*/
display:inline-block;
background:#333;
width:70px;
height:70px;
border-radius: 50%;
color:#ccc;
outline: none;
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverした際の背景色の設定*/
.btnripple2:hover{
background:#666;
}
/*波形を2つ設定*/
.btnripple2::after,
.btnripple2::before {
content: '';
/*絶対配置で波形の位置を決める*/
position: absolute;
left: -25%;
top: -25%;
/*波形の形状*/
border: 1px solid #333;
width: 150%;
height: 150%;
border-radius: 50%;
/*はじめは不透明*/
opacity: 1;
/*ループするアニメーションの設定*/
animation:1s circleanime linear infinite;
}
/*波形の2つ目は0.5秒遅らせてアニメーション*/
.btnripple2::before {
animation-delay:.5s;
}
/*波形のアニメーション*/
@keyframes circleanime{
0% {
transform: scale(0.68);
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/*中央矢印*/
.btnripple2 span::after {
content: '';
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 38%;
left: 45%;
/*矢印の形状*/
border: 14px solid transparent;
border-top-width: 10px;
border-bottom-width: 10px;
border-left-color: #fff;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-11.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnripple">7-1-11 クリックしたら波紋が広がる</a>
CSSの書き方
/* クリックしたら波紋が広がる */
.btnripple{
/*波紋の基点とするためrelativeを指定*/
position: relative;
/*はみ出す波紋を隠す*/
overflow: hidden;
/*ボタンの形状*/
text-decoration: none;
display:inline-block;
background: #333;
color: #fff;
padding: 10px 20px;
border-radius: 25px;
outline: none;
}
.btnripple::after {
content: "";
/*絶対配置で波紋位置を決める*/
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/*波紋の形状*/
background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
transform: scale(10, 10);
/*はじめは透過0に*/
opacity: 0;
/*アニメーションの設定*/
transition: transform 0.3s, opacity 1s;
}
/*クリックされたあとの形状の設定*/
.btnripple:active::after {
transform: scale(0, 0);
transition: 0s;
opacity: 0.3;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-10.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn02 rotateback"><span>7-1-10 くるっと回転（奥に）</span><span>回転後（奥に）</span></a>
CSSの書き方
/*== ボタン共通設定 */
.btn02 {
/*背景の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
width:100%;
max-width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
outline: none;
}
/*ボタン内側の設定*/
.btn02 span {
display: block;
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #333;
/* 重なりを3Dで表示 */
transform-style: preserve-3d;
/* アニメーションの設定 数字が少なくなるほど早く回転 */
transition: 0.5s;
}
/*== くるっと回転（奥に） */
/* 回転前 */
.rotateback span:nth-child(1) {
background: #fff;
color: #000;
transform: rotateX(0deg); /*はじめは回転なし*/
transform-origin: 0 50% -25px; /* 回転する起点 */
}
/* hoverをした後の形状 */
.rotateback:hover span:nth-child(1) {
transform: rotateX(90deg); /* X軸に90度回転 */
}
/* 回転後 */
.rotateback span:nth-child(2) {
background: #000;
color: #fff;
transform: rotateX(-90deg); /*はじめはX軸に-90度回転*/
transform-origin: 0 50% -25px; /* 回転する起点 */
}
/* hoverをした後の形状 */
.rotateback:hover span:nth-child(2) {
transform: rotateX(0deg);/* X軸に0度回転 */
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-9.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn02 rotatefront"><span>7-1-9 くるっと回転（手前に）</span><span>回転後（手前に）</span></a>
CSSの書き方
/*== ボタン共通設定 */
.btn02 {
/*背景の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
width:100%;
max-width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
outline: none;
}
/*ボタン内側の設定*/
.btn02 span {
display: block;
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #333;
/* 重なりを3Dで表示 */
transform-style: preserve-3d;
/* アニメーションの設定 数字が少なくなるほど早く回転 */
transition: 0.5s;
}
/*== くるっと回転（手前に） */
/* 回転前 */
.rotatefront span:nth-child(1) {
background: #fff;
color: #000;
transform: rotateX(0deg);/*はじめは回転なし*/
transform-origin: 0 50% -25px;/* 回転する起点 */
}
/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(1) {
transform: rotateX(-90deg);/* X軸に-90度回転 */
}
/* 回転後 */
.rotatefront span:nth-child(2) {
background: #000;
color: #fff;
transform: rotateX(90deg);/*はじめはX軸に90度回転*/
transform-origin: 0 50% -25px;/* 回転する起点 */
}
/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(2) {
transform: rotateX(0deg);/* X軸に0度回転 */
}