HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-35.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches3"><span>7-1-35 下線が伸びて背景に変わる</span></a>
CSSの書き方
/*== 下線が伸びて背景に変わる */
.btnlinestretches3{
/*線の基点とするためrelativeを指定*/
position:relative;
/*ボタンの形状*/
color:#333;
padding: 10px 30px;
display:inline-block;
text-decoration: none;
outline: none;
}
/*テキストの設定*/
.btnlinestretches3 span{
/*テキストを前面に出すためz-indexの値を高く設定*/
position:relative;
z-index: 2;
}
.btnlinestretches3:hover span{
color: #fff;
}
/*線の設定*/
.btnlinestretches3::after {
content:'';
/*絶対配置で線の位置を決める*/
position:absolute;
z-index:1;
bottom:0;
left:0;
/*線の形状*/
background:#333;
width:100%;
height:3px;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
/*線が伸びて背景に*/
.btnlinestretches3:hover::after {
height:100%;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-34.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches2">7-1-34 少し出ていた線が伸びる</a>
CSSの書き方
/*== 少し出ていた線が伸びる */
.btnlinestretches2{
/*線の基点とするためrelativeを指定*/
position:relative;
/*ボタンの形状*/
color:#333;
padding: 10px 30px;
display:inline-block;
text-decoration: none;
outline: none;
}
/*線の設定*/
.btnlinestretches2::before,
.btnlinestretches2::after {
content:'';
/*絶対配置で線の位置を決める*/
position:absolute;
/*事前に出現させる線の形状*/
border:solid #333;
width:10px;
height:10px;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
.btnlinestretches2::before{
/*事前に出現させる線の位置*/
top:0;
left:0;
/*事前に出現させる線の形状*/
border-width:2px 0 0 2px;
}
.btnlinestretches2::after{
/*事前に出現させる線の位置*/
bottom:0;
right:0;
/*事前に出現させる線の形状*/
border-width:0 2px 2px 0;
}
/*hoverした際の線の形状*/
.btnlinestretches2:hover::before,
.btnlinestretches2:hover::after{
width:calc(100% - 2px);
height:calc(100% - 2px);
border-color:#666
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-33.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btnlinestretches">7-1-33 外の線が伸びる</a>
CSSの書き方
/*== 外の線が伸びる */
.btnlinestretches{
/*線の基点とするためrelativeを指定*/
position:relative;
/*ボタンの形状*/
color:#333;
border:1px solid #333;
padding: 10px 30px;
display:inline-block;
text-decoration: none;
outline: none;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
/*hoverした際の背景の形状*/
.btnlinestretches:hover{
background:#333;
color: #fff;
border-color:transparent;
}
/*線の設定*/
.btnlinestretches::before,
.btnlinestretches::after {
content:'';
/*絶対配置で線の位置を決める*/
position:absolute;
border:solid #333;
width:10px;
height:10px;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}
/*線の位置と形状*/
.btnlinestretches::before{
top:-6px;
left:-6px;
border-width:1px 0 0 1px;
}
/*線の位置と形状*/
.btnlinestretches::after{
bottom:-6px;
right:-6px;
border-width:0 1px 1px 0;
}
/*hoverした際の線の形状*/
.btnlinestretches:hover::before,
.btnlinestretches:hover::after{
width:calc(100% + 11px);
height:calc(100% + 11px);
border-color:#666;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-32.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="gradient4">7-1-32 グラデーション線から塗に変化する</a>
CSSの書き方
/*== グラデーション線から塗に変化する */
.gradient4{
/*ボタンの形状*/
display: inline-block;
padding: 18px 60px;
border-radius:30px;
text-decoration: none;
border:1px solid #fa6c9f;
color: #fa6c9f;
outline: none;
/*アニメーションの指定*/
transition: all 0.4s ease-out;
}
/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover{
/*ボタンの形状*/
border-color:transparent;
color: #fff;
/*背景の色と形状*/
background: linear-gradient(270deg, #fa6c9f 0%, #ffe140 50%, #ff357f 100%);
background-size: 200% auto;
background-position: right center;
/*ボックスの影*/
box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}
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);
}