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;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-42.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btntextchange"><span>About</span><span>私たちについて</span></a>
CSSの書き方
/*表示するテキストが切り替わる*/
.btntextchange{
/*テキストの基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
border: 1px solid #555;
border-radius:25px;
min-width:210px;
padding: 20px;
text-align: center;
display: inline-block;
text-decoration: none;
color: #333;
outline: none;
/*アニメーションの指定*/
transition: all .2s;
}
/*hoverした際の変化*/
.btntextchange:hover{
background:#333;
color:#fff;
}
.btntextchange span{
/*絶対配置でテキストの位置を決める*/
position: absolute;
left: 50%;
top:50%;
transform:translate(-50%,-50%);
/*アニメーションの指定*/
transition: all .5s;
/*ブロック要素にしてテキスト折り返しなし*/
display: block;
white-space: nowrap;
}
/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
opacity:0;/*透過0に*/
}
/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
opacity:0;/*透過0に*/
}
.btntextchange:hover span:nth-child(2){
opacity:1;/*不透明に*/
}