HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-47.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnarrow5">7-1-47 矢印が右に移動して背景がつく</a>
CSSの書き方
/*矢印が右に移動して背景がつく*/
.btnarrow5{
/*矢印の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
border: 1px solid #555;
padding: 8px 30px;
display: inline-block;
text-align: center;
text-decoration: none;
color: #333;
outline: none;
/*アニメーションの指定*/
transition: all .2s linear;
}
.btnarrow5:hover{
background:#333;
color:#fff;
}
/*矢印と下線の形状*/
.btnarrow5::before{
content:"";
/*絶対配置で下線の位置を決める*/
position: absolute;
top:50%;
right:-26px;
/*下線の形状*/
width:40px;
height:1px;
background:#333;
/*アニメーションの指定*/
transition: all .2s linear;
}
.btnarrow5::after{
content:"";
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 20%;
right: -21px;
/*矢印の形状*/
width:1px;
height:12px;
background:#333;
transform:skewX(45deg);
/*アニメーションの指定*/
transition: all .2s linear;
}
/*hoverした際の移動*/
.btnarrow5:hover::before{
right:-30px;
}
.btnarrow5:hover::after{
right:-25px;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-46.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnarrow4">7-1-46 矢印が右に移動する</a>
CSSの書き方
/*矢印が右に移動する*/
.btnarrow4{
/*矢印と下線の基点とするためrelativeを指定*/
position: relative;
/*形状*/
display: inline-block;
padding: 0 20px;
color: #333;
text-decoration: none;
outline: none;
}
/*矢印と下線の形状*/
.btnarrow4::before{
content: '';
/*絶対配置で下線の位置を決める*/
position: absolute;
bottom:-8px;
left:15%;
/*下線の形状*/
width: 85%;
height: 1px;
background:#333;
/*アニメーションの指定*/
transition: all .3s;
}
.btnarrow4::after{
content: '';
/*絶対配置で矢印の位置を決める*/
position: absolute;
bottom:-3px;
right:0;
/*矢印の形状*/
width: 15px;
height:1px;
background:#333;
transform: rotate(35deg);
/*アニメーションの指定*/
transition: all .3s;
}
/*hoverした際の移動*/
.btnarrow4:hover::before{
left:20%;
}
.btnarrow4:hover::after{
right:-5%;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-45.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn06 btnarrow3">7-1-45 矢印が回転</a>
CSSの書き方
/* ボタン共通設定 */
.btn06{
/*矢印の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
background:#333;
color:#fff;
padding: 10px 40px 10px 30px;
border-radius:25px;
text-align: center;
outline: none;
/*アニメーションの指定*/
transition: ease .2s;
}
.btn06:hover{
background:#555;
}
/* 矢印が回転 */
.btnarrow3::after{
content: '';
/*絶対配置で矢印の位置を決める*/
position: absolute;
top: 42%;
right: 13px;
/*矢印の形状*/
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all .3s;
}
/*hoverした際のアニメーション*/
.btnarrow3:hover::after{
animation: arrowrotate .3s;
}
@keyframes arrowrotate {
100% {
transform: rotate(360deg);
}
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-44.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn06 btnarrow2">7-1-44 矢印が右に移動して現在地に戻る</a>
CSSの書き方
/* ボタン共通設定 */
.btn06{
/*矢印の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
background:#333;
color:#fff;
padding: 10px 40px 10px 30px;
border-radius:25px;
text-align: center;
outline: none;
/*アニメーションの指定*/
transition: ease .2s;
}
.btn06:hover{
background:#555;
}
/* 矢印が右に移動して現在地に戻る */
.btnarrow2::after{
content: '';
/*絶対配置で矢印の位置を決める*/
position: absolute;
top:42%;
right: 13px;
/*矢印の形状*/
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
/*hoverした際のアニメーション*/
.btnarrow2:hover::after{
animation: arrow .5s;
}
@keyframes arrow {
50% {
right: 10px;
}
100% {
right: 13px;
}
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-43.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn06 btnarrow1">7-1-43 矢印が右に移動</a>
CSSの書き方
/* ボタン共通設定 */
.btn06{
/*矢印の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
background:#333;
color:#fff;
padding: 10px 40px 10px 30px;
border-radius:25px;
text-align: center;
outline: none;
/*アニメーションの指定*/
transition: ease .2s;
}
.btn06:hover{
background:#555;
}
/* 矢印が右に移動 */
.btnarrow1::after{
content: '';
/*絶対配置で矢印の位置を決める*/
position: absolute;
top:42%;
right: 13px;
/*矢印の形状*/
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
/*アニメーションの指定*/
transition: all .3s;
}
/*hoverした際の移動*/
.btnarrow1:hover::after{
right: 11px;
}