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;
}