【はてなブログPro専用】記事内「ボタン7種類」公開#002

f:id:shokochun:20191209231102j:plain
こんにちは、会社員しょこちゅんです🤗

さて、まだ前回の記事を読んでない方はこちらからチェックしてください。

今回は前回の記事を元に引き続き7パターンのボタンを紹介していきます！

前回の設定を引き継ぐ部分がありますので、まだ見てない方は前回の記事から見てください。

前回の応用となりますので、この記事では、それぞれのボタンを「HTML編集」に貼り付けるタグだけを一気に記載していきます。

それでは、さっそく見ていきましょう(^^) ｵｰｯ

01.【BOTTON1】

ボタンの上にマウスを合わせて見てね▼サンプル▼ BUTTON1

<style type="text/css"><!--
/*BUTTON1*/
.btn-flat-border {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #67c5ff;
border: solid 2px #67c5ff;
border-radius: 3px;
transition: .4s;
}
.btn-flat-border:hover {
background: #67c5ff;
color: white;
}
--></style>
<p><center><a href="#" class="btn-flat-border" style="text-decoration: none;" target="_blank"> BUTTON1 </a></center></p>

追記：17行目の<a href="#"…シャープ部分を消し、＃の代わりにリンクさせたいURLをいれます。

ボタンの上にマウスを合わせて見てね▼サンプル▼ BUTTON2

<style type="text/css"><!--
/*BUTTON2*/
.btn-flat-vertical-border {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;
border-left: solid 4px #668ad8;
border-right: solid 4px #668ad8;
color: #668ad8;
background: #e1f3ff;
transition: .4s;
}
.btn-flat-vertical-border:hover {
background: #668ad8;
color: #FFF;
}
--></style>
<center><a href="#" class="btn-flat-vertical-border" style="text-decoration: none;" target="_blank"> BUTTON2 </a></center>

追記：20行目の<a href="#"…シャープ部分を消し、＃の代わりにリンクさせたいURLをいれます。

ボタンの上にマウスを合わせて見てね▼サンプル▼ BUTTON3

<style type="text/css"><!--
/*BUTTON3*/
.btn-circle-flat {
display: inline-block;
text-decoration: none;
background: #87befd;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
transition: .4s;
}
.btn-circle-flat:hover {
background: #668ad8;
}
--></style>
<center><a href="#" class="btn-circle-flat" style="text-decoration: none;" target="_blank"> BUTTON3 </a></center>

追記：20行目の<a href="#"…シャープ部分を消し、＃の代わりにリンクさせたいURLをいれます。

ボタンの上にマウスを合わせて見てね▼サンプル▼ BUTTON4

<style type="text/css"><!--
/*BUTTON4*/
.btn-circle-fishy {
display: inline-block;
text-decoration: none;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
transition: .4s;
}
.btn-circle-fishy:hover {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
--></style>
<center><a href="#" class="btn-circle-fishy" style="text-decoration: none;" target="_blank"> BUTTON4 </a></center>

追記：21行目の<a href="#"…シャープ部分を消し、＃の代わりにリンクさせたいURLをいれます。

ボタンの上にマウスを合わせて見てね▼サンプル▼ BUTTON5

<style type="text/css"><!--
/*BUTTON5*/
.btn-cross {
display: inline-block;
position: relative;
padding: 0.25em 1.5em;
border-top: solid 1px black;
border-bottom: solid 1px black;
text-decoration: none;
font-weight: bold;
color: #03A9F4;
}
.btn-cross:before, .btn-cross:after {
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
transition: .3s;
}
.btn-cross:before {
left: 7px;
}
.btn-cross:after {
right: 7px;
}
.btn-cross:hover:before {
top: 0px;
left:0;
height: 100%;
}
.btn-cross:hover:after {
top: 0px;
right: 0;
height: 100%;
}
--></style>
<center><a href="#" class="btn-cross" style="text-decoration: none;" target="_blank"> BUTTON5 </a></center>

追記：40行目の<a href="#"…シャープ部分を消し、＃の代わりにリンクさせたいURLをいれます。

ボタンの上にマウスを合わせて見てね▼サンプル▼ BUTTON6

<style type="text/css"><!--
/*BUTTON6*/
.btn-top-radius {
position: relative;
display: inline-block;
font-weight: bold;
padding: 8px 10px 5px 10px;
text-decoration: none;
color: #FFA000;
background: #fff1da;
border-bottom: solid 4px #FFA000;
border-radius: 15px 15px 0 0;
transition: .4s;
}
.btn-top-radius:hover {
background: #ffc25c;
color: #FFF;
}
--></style>
<center><a href="#" class="btn-top-radius" style="text-decoration: none;" target="_blank"> BUTTON6 </a></center>

追記：20行目の<a href="#"…シャープ部分を消し、＃の代わりにリンクさせたいURLをいれます。

ボタンの上にマウスを合わせて見てね▼サンプル▼ BUTTON7

<style type="text/css"><!--
/*BUTTON7*/
.btn-circle-border-double {
display: inline-block;
text-decoration: none;
color: #668ad8;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
border: double 4px #668ad8;
text-align: center;
overflow: hidden;
transition: .6s;
}
.btn-circle-border-double:hover {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
--></style>
<center><a href="#" class="btn-circle-border-double" style="text-decoration: none;" target="_blank"> BUTTON7 </a></center>