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;
}
HTMLの書き方
1.head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-26.css">2.body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn05 bordercircle1"><span>7-1-26 左上と右下から枠線が伸びて塗に</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%;
}
/*== 左上と右下から枠線が伸びて塗に */
/*横線が0.2秒送れて出現*/
.bordercircle1::before{
right: 0;
top: 0;
transition-delay: 0.2s;
}
.bordercircle1::after{
left: 0;
bottom: 0;
transition-delay: 0.2s;
}
/*縦線が出現*/
.bordercircle1 span::before{
left: 0;
top: 0;
}
.bordercircle1 span::after{
right: 0;
bottom: 0;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-25.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn04 bordercenter"><span>7-1-25 線から塗に変化（中央から外）</span></a>
CSSの書き方
/* ボタン共通設定 */
.btn04 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display:inline-block;
padding: 10px 30px;
color:#333;
border:1px solid #ccc;
text-decoration: none;
outline: none;
/*はみ出す背景色を隠す*/
overflow: hidden;
}
/*hoverした際のボタンの形状*/
.btn04:hover {
color:#ccc;
border-color: transparent;
/*色の変化を遅らせる*/
transition-delay: .6s;
}
/*線の設定*/
.btn04 span{
display: block;
z-index: 2;
}
/*== 線から塗に変化（中央から外） */
/*線の設定*/
.bordercenter span::before,
.bordercenter span::after{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
/*線の形状*/
width: 100%;
height:1px;
background: #333;
/*アニメーションの設定*/
transition: all .3s;
transform: scale(0,1);
transform-origin: center;
}
/*上線*/
.bordercenter span::before {
left:0;
top:0;
}
/*下線*/
.bordercenter span::after {
left:0;
bottom:0;
}
/*hoverをすると線が伸びる*/
.bordercenter:hover span::before,
.bordercenter:hover span::after{
transform: scale(1,1);
}
/*背景の設定*/
.bordercenter::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
left: 0;
top:0;
z-index: -1;
/*背景の形状*/
height: 100%;
width:100%;
background:#333;
/*アニメーションの設定*/
transition: all .3s;
transform: scale(0,1);
transform-origin: center;
}
/*hoverをすると背景が伸びる*/
.bordercenter:hover::before{
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
transform: scale(1,1);
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-24.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn04 borderright"><span>7-1-24 線から塗に変化（右から左）</span></a>
CSSの書き方
/* ボタン共通設定 */
.btn04 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display:inline-block;
padding: 10px 30px;
color:#333;
border:1px solid #ccc;
text-decoration: none;
outline: none;
/*はみ出す背景色を隠す*/
overflow: hidden;
}
/*hoverした際のボタンの形状*/
.btn04:hover {
color:#ccc;
border-color: transparent;
/*色の変化を遅らせる*/
transition-delay: .6s;
}
/*線の設定*/
.btn04 span{
display: block;
z-index: 2;
}
/*== 線から塗に変化（右から左） */
/*線の設定*/
.borderright span::before,
.borderright span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width:0;
height:1px;
/*線の形状*/
background: #333;
/*アニメーションの設定*/
transition: all .3s;
}
/*右上線*/
.borderright span::before {
right:0;
top:0;
}
/*右下線*/
.borderright span::after {
right:0;
bottom:0;
}
/*hoverをすると線が伸びる*/
.borderright:hover span::before,
.borderright:hover span::after {
width: 100%;
}
/*背景の設定*/
.borderright::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
right: 0;
bottom:0;
z-index: -1;
/*背景の形状*/
height: 100%;
width: 0;
background:#333;
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderright:hover::before{
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-1-23.css">body内のボタンを表示させたい場所に以下のHTMLを記載します。
<a href="#" class="btn04 borderleft"><span>7-1-23 線から塗に変化（左から右）</span></a>
CSSの書き方
/* ボタン共通設定 */
.btn04 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display:inline-block;
padding: 10px 30px;
color:#333;
border:1px solid #ccc;
text-decoration: none;
outline: none;
/*はみ出す背景色を隠す*/
overflow: hidden;
}
/*hoverした際のボタンの形状*/
.btn04:hover {
color:#ccc;
border-color: transparent;
/*色の変化を遅らせる*/
transition-delay: .6s;
}
/*線の設定*/
.btn04 span{
display: block;
z-index: 2;
}
/*== 線から塗に変化（左から右） */
/*線の設定*/
.borderleft span::before,
.borderleft span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width:0;
height:1px;
/*線の形状*/
background: #333;
/*アニメーションの設定*/
transition: all .3s;
}
/*左上線*/
.borderleft span::before {
left:0;
top:0;
}
/*左下線*/
.borderleft span::after {
left:0;
bottom:0;
}
/*hoverをすると線が伸びる*/
.borderleft:hover span::before,
.borderleft:hover span::after {
width: 100%;
}
/*背景の設定*/
.borderleft::before{
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
left: 0;
bottom:0;
z-index: -1;
/*背景の形状*/
height: 100%;
width: 0;
background:#333;
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderleft:hover::before{
width: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}