HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-31.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="gradient3">7-1-31 グラデーションが拡大する</a>
CSSの書き方
/*== グラデーションが拡大する */
.gradient3 {
/*ボタンの形状*/
display: inline-block;
color: #fff;
padding: 18px 60px;
border-radius:30px;
text-decoration: none;
outline: none;
/*背景色*/
background: linear-gradient(to right, #44ea76 0%, #39fad7 80%, #39fad7 100%);
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際のスケールで全体を拡大し影を付ける*/
.gradient3:hover {
transform: scale(1.05);
/*ボックスの影*/
box-shadow: 0 15px 15px rgba(57,250,215,0.4);
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-30.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="gradient2">7-1-30 グラデーションが縮小する</a>
CSSの書き方
/*== グラデーションが縮小する */
.gradient2 {
/*ボタンの形状*/
display: inline-block;
color: #fff;
padding: 18px 60px;
border-radius:30px;
text-decoration: none;
outline: none;
/*背景の色と形状*/
background: linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%);
box-shadow: 0 15px 15px rgba(82,160,253,0.4);
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際のスケールで全体を縮小*/
.gradient2:hover{
transform: scale(0.95);
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-29.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="gradient1">7-1-29 グラデーションが流れる</a>
CSSの書き方
/*== グラデーションが流れる */
.gradient1{
/*ボタンの形状*/
display: inline-block;
color:#fff;
padding: 18px 60px;
border-radius:30px;
text-decoration: none;
outline: none;
/*背景の色と形状*/
background: linear-gradient(270deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);
background-position: 1% 50%;
background-size: 200% auto;
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}
/*hoverした際の、背景の場所とテキスト色の変更*/
.gradient1:hover {
color: #fff;
background-position: 99% 50%;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-28.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn05 bordercircle3"><span>7-1-28 左上と右下から枠線が伸びて塗りに</span></a>
CSSの書き方
/*--- 線から塗り（共通設定） ---*/
.btn05{
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
color: #333;
padding: 10px 20px;
background:#eee;
text-decoration: none;
outline: none;
/*アニメーションの指定*/
transition: all .3s;
transition-delay: .7s;/*0.7秒遅れてアニメーション*/
}
/*hoverした際の、ボタンの背景とテキスト色の変更*/
.btn05:hover{
background:#333;
color: #fff;
}
/*線の設定*/
.btn05 span{
display: block;
}
/*横線の設定*/
.btn05::before,
.btn05::after{
content:"";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 0;
height: 1px;
background: #333;
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*縦線の設定*/
.btn05 span::before,
.btn05 span::after{
content:"";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width:1px;
height:0;
background: #333;
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*hoverした際、線が縦横100%伸びる*/
.btn05:hover::before,
.btn05:hover::after{
width: 100%;
}
.btn05:hover span::before,
.btn05:hover span::after{
height: 100%;
}
/*== 左上と右下から枠線が伸びて塗りに */
/*右下から右上へ伸びる横線*/
.bordercircle3::after{
right:0;
bottom: 0;
transition-duration: 0.4s;
}
/*右下から右上へ伸びる縦線*/
.bordercircle3 span::after{
right:0;
bottom: 0;
transition-duration: 0.4s;
}
/*左上から右上へ伸びる横線*/
.bordercircle3::before{
left: 0;
top: 0;
transition-duration: 0.4s;
}
/*左上から左下へ伸びる横線*/
.bordercircle3 span::before{
left: 0;
top: 0;
transition-duration: 0.4s;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-27.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn05 bordercircle2"><span>7-1-27 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに</span></a>
CSSの書き方
/*--- 線から塗り（共通設定） ---*/
.btn05{
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
color: #333;
padding: 10px 20px;
background:#eee;
text-decoration: none;
outline: none;
/*アニメーションの指定*/
transition: all .3s;
transition-delay: .7s;/*0.7秒遅れてアニメーション*/
}
/*hoverした際の、ボタンの背景とテキスト色の変更*/
.btn05:hover{
background:#333;
color: #fff;
}
/*線の設定*/
.btn05 span{
display: block;
}
/*横線の設定*/
.btn05::before,
.btn05::after{
content:"";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 0;
height: 1px;
background: #333;
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*縦線の設定*/
.btn05 span::before,
.btn05 span::after{
content:"";
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width:1px;
height:0;
background: #333;
/*アニメーションの指定*/
transition: all 0.2s linear;
}
/*hoverした際、線が縦横100%伸びる*/
.btn05:hover::before,
.btn05:hover::after{
width: 100%;
}
.btn05:hover span::before,
.btn05:hover span::after{
height: 100%;
}
/*== 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに */
/*左下から右下へ伸びる横線*/
.bordercircle2::after{
left: 0;
bottom: 0;
}
/*右下から上へ伸びる縦線*/
.bordercircle2 span::after{
right: 0;
bottom: 0;
transition-delay: 0.2s;
}
/*右上から左上へ伸びる横線*/
.bordercircle2::before{
right: 0;
top: 0;
transition-delay: 0.4s;
}
/*左上から左下へ伸びる横線*/
.bordercircle2 span::before{
left: 0;
top: 0;
transition-delay: 0.6s;
}