HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-41.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btntransform">リンクテキストが入る</a>
CSSの書き方
/*丸がボタンに変形する*/
.btntransform{
/*丸の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
padding:0 0 0 15px;
line-height: 50px;
color: #333;
text-decoration: none;
outline: none;
}
/* 丸が動く */
.btntransform::before{
content:'';
/*絶対配置で丸の位置を決める*/
position:absolute;
left:0;
z-index: -1;
/*丸の形状*/
width:50px;
height:50px;
background:#ccc;
border-radius:25px;
/*アニメーションの指定*/
transition:.3s ease-out;
}
/*hoverした際の形状*/
.btntransform:hover::before{
width:212px;
}
/* 矢印の形状 */
.btntransform::after{
position: absolute;
content: '';
top: 1.3em;
right: -15px;
width: 5px;
height: 5px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-40.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnshine">7-1-40 きらっと光る</a>
CSSの書き方
/*きらっと光る*/
.btnshine{
/*キラッと光る基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display:inline-block;
background: #333;
color: #fff;
padding: 10px 20px;
text-decoration: none;
outline: none;
overflow: hidden;
}
/*キラッと光る*/
.btnshine::before {
content: '';
/*絶対配置でキラッと光るの位置を決める*/
position: absolute;
top: 0;
left: -75%;
/*キラッと光る形状*/
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
transform: skewX(-25deg);
}
/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
animation: shine 0.7s;
}
@keyframes shine {
100% {
left: 125%;
}
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-39.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnchangeradius">7-1-39 角丸に変わる</a>
CSSの書き方
/*角丸に変わる*/
.btnchangeradius{
/*ボタンの形状*/
display:inline-block;
background: #333;
color: #fff;
padding: 10px 20px;
border: 5px double white;
text-decoration: none;
outline: none;
/*アニメーションの指定*/
transition:.3s ease-out;
}
/*hoverした際の角丸のアニメーション*/
.btnchangeradius:hover{
background:#666;
border-radius:20px;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-38.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnchangeline"><span>7-1-38 塗りから線に変わる</span></a>
CSSの書き方
/*塗りから線に変わる*/
.btnchangeline {
/*線の基点とするためrelativeを指定*/
position:relative;
/*ボタンの形状*/
color:#333;
padding: 10px 30px;
display:inline-block;
text-decoration: none;
outline: none;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
/*線の設定*/
.btnchangeline::before {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
/*線の形状*/
width: 100%;
height: 100%;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
/*はじめは透過0に*/
opacity: 0;
transform: scale(0, 1);
/*アニメーションの指定*/
transition: all 0.3s;
}
/*背景の設定*/
.btnchangeline::after {
content: '';
/*絶対配置で背景の位置を決める*/
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
/*背景の形状*/
width: 100%;
height: 100%;
background-color:#333;
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hoverした際の背景と線の形状*/
.btnchangeline:hover::before {
opacity: 1;/*不透明に*/
transform: scale(1, 1);/*X方向に線を伸ばす*/
}
.btnchangeline:hover::after {
opacity: 0;/*透過0に*/
transform: scale(0, 1);/*X方向に背景を縮小*/
}
/*テキストの設定*/
.btnchangeline span {
/*テキストを前面に出すためz-indexの値を高く設定*/
position: relative;
z-index: 2;
/*テキストの形状*/
color: #fff;
/*アニメーションの指定*/
transition: all 0.3s;
}
/*hoverした際のテキストの形状*/
.btnchangeline:hover span {
letter-spacing: 2px;
color: #333;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-37.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches5"><span>7-1-37 矢印の線がループして伸縮</span></a>
CSSの書き方
/*== 矢印の線がループして伸縮 */
.btnlinestretches5{
/*線の基点とするためrelativeを指定*/
position:relative;
/*リンクの形状*/
color:#333;
padding: 10px 0;
display:inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.btnlinestretches5::before {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: 0;
/*線の形状*/
width: 100%;
height: 1px;
background: #333;
}
/*矢印の設定*/
.btnlinestretches5::after {
content: "";
/*絶対配置で線の位置を決める*/
position: absolute;
bottom:-4px;
/*矢印の形状*/
width: 8px;
height: 8px;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: rotate(45deg);
}
/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
animation: arrowlong01 2s ease infinite;
}
.btnlinestretches5::after {
animation: arrowlong02 2s ease infinite;
}
@keyframes arrowlong01{
0%{
width:0;opacity:0
}
20%{
width:0;opacity:1
}
80%{
width:105%;opacity:1
}
100%{
width:105%;opacity:0
}
}
@keyframes arrowlong02{
0%{
left:0;opacity:0
}
20%{
left:0;opacity:1
}
80%{
left:103%;opacity:1
}
100%{
left:103%;opacity:0
}
}