ボタンサンプル
a.cp_btn {
width:270px; /*横幅を変更*/
font-size: 114%; /*文字の大きさを変更*/
padding: 0.8em 0.8em; /*文字の周りの余白を決める 上下・左右*/
text-align: center; /*文字の位置 center=中央ぞろえ right=右揃え、left=左揃え*/
border: 3px solid #9C27B0; /*周りの線について 線の太さ 線の種類 線の色*/
text-decoration: none; /*テキストの装飾*/
position: relative; /*触らない*/
display: block; /*触らない*/
outline: none; /*触らない*/
transition: all .4s; /*触らない*/
}
a.cp_btn::before,
a.cp_btn::after {
position: absolute; /*触らない*/
top: -3px; /*触らない*/
right: -3px; /*触らない*/
bottom: -3px; /*触らない*/
left: -3px; /*触らない*/
z-index: 2; /*触らない*/
content: ”; /*触らない*/
transition: all .4s; /*触らない*/
}
a.cp_btn::before {
border-top: 3px solid #FF5722; /*マウスを乗せた時に変更される枠線 上の方*/
border-bottom: 3px solid #FF5722; /*マウスを乗せた時に変更される枠線 下の方*/
transform: scale(0, 1); /*触らない*/
}
a.cp_btn::after {
border-right: 3px solid #FF5722; /*マウスを乗せた時に変更される枠線 上の方*/
border-left: 3px solid #FF5722; /*マウスを乗せた時に変更される枠線 上の方*/
transform: scale(1, 0); /*触らない*/
}
a.cp_btn:hover {
color: #FF5722; /*マウスを乗せた時に変更される枠線の色*/
}
a.cp_btn:hover::after,
a.cp_btn:hover::before {
transform: scale(1); /*触らない*/
}
a.cp_btnB {
font-size: 114%; /*文字の大きさを変更*/
width: 270px; /*横幅を変更*/
padding: 0.8em 0.8em; /*文字の周りの余白を決める 上下・左右*/
text-align: center; /*文字の位置 center=中央ぞろえ right=右揃え、left=左揃え*/
text-decoration: none; /*テキストの装飾*/
color: #fff; /*文字の色*/
background: #2196F3; /*背景色*/
border:solid 1px #fff; /*周りの線について 線の種類 線の太さ 線の色*/
position: relative; /*触らない*/
display: block; /*触らない*/
overflow: hidden; /*触らない*/
}
a.cp_btnB:before {
background : #fff; /*背景色*/
content:””; /*触らない*/
position: absolute; /*触らない*/
top: -25px; /*触らない*/
left: -20px; /*触らない*/
height:90px; /*触らない*/
width:20px; /*触らない*/
opacity: 0.3; /*触らない*/
transform: rotate(40deg); /*触らない*/
transition: 0.3s; /*触らない*/
}
a.cp_btnB:hover:before {
left:98%; /*触らない*/
}
a.cp_btnC {
font-size: 114%; /*文字の大きさを変更*/
width: 270px; /*横幅を変更*/
padding: 0.8em 0.8em; /*文字の周りの余白を決める 上下・左右*/
text-align: center; /*文字の位置 center=中央ぞろえ right=右揃え、left=左揃え*/
text-decoration: none; /*テキストの装飾*/
color: #FFF; /*文字の色*/
background: #26C6DA; /*背景色*/
border-bottom: 2px solid #00838F; /*下にある線(ちょっと濃いので浮いたように見える 線の太さ 線の種類 線の色*/
border-radius: 4px; /*角丸 数値が大きいとより丸まる*/
position: relative; /*触らない*/
display: block; /*触らない*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19); /*触らない*/
}
a.cp_btnC:active {
border-bottom: 2px solid #26C6DA; /*マウスをクリックした時に下にある線 線の太さ 線の種類 線の色*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30); /*触らない*/
}
a.cp_btnD {
font-size: 114%; /*文字の大きさを変更*/
width: 270px; /*横幅を変更*/
padding: 0.8em 0.8em; /*文字の周りの余白を決める 上下・左右*/
text-align: center; /*文字の位置 center=中央ぞろえ right=右揃え、left=左揃え*/
text-decoration: none; /*テキストの装飾*/
color: #EC407A; /*文字の色*/
border: 2px solid #EC407A;
border-radius: 3px; /*角丸 数値が大きいとより丸まる*/
display: block; /*触らない*/
transition: .4s; /*触らない*/
}
a.cp_btnD:hover {
background: #EC407A; /*カーソルを乗せた時の背景の色*/
color: #fff; /*カーソルを乗せた時の文字の色*/
}
