前回ご紹介したボタンデザインの色違いです。
ほんのりくすみの入ったピンクにしてみました。
投稿記事の「HTML表示」に、コピペすれば使えます。
「HTMLの記述」と「CSSの記述」で分けて書いています。
HTMLの記述は上に、CSSの記述は記事の投稿内容より下に貼り付けると後々、分かりやすくて良いです。
/*文字色*//*ボタン色*//*線の色*//*影の設定*/というように、色に関する設定のところにコメントを書いてありますので、お好きな色に変更して使ってみてください。
① マウスをのせるとボタンの色が変わります+シャドウ付
HTMLの記述
<div class="btn float">Button</div>
CSSの記述
<style type="text/css">
.btn {
position: relative;
display: inline-block;
background-color: white;/*ボタン色*/
border: 1px solid #f4cecf;/*線の色*/
font-weight: 600;
padding: 10px 40px;
margin: 10px auto;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn.float:hover {
background-color: #f4cecf;/*ボタン色*/
color: white;/*文字色*/
-webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);/*影の設定*/
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);/*影の設定*/
}
</style>
② ①の逆バージョン
HTMLの記述
<div class="btn filled">Button</div>
CSSの記述
<style type="text/css">
.btn {
position: relative;
display: inline-block;
background-color: white;/*ボタン色*/
border: 1px solid #f4cecf;/*線の色*/
font-weight: 600;
padding: 10px 40px;
margin: 10px auto;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn.filled {
background-color: #f4cecf;/*ボタン色*/
color: white;/*文字色*/
-webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);/*影の設定*/
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);/*影の設定*/
}
.btn.filled:hover {
background-color: white;/*ボタン色*/
color: #f4cecf;/*文字色*/
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
③ マウスをのせるとボタン幅が広がります。
HTMLの記述
<div class="btn letter-spacing">Button</div>
CSSの記述
<style type="text/css">
.btn {
position: relative;
display: inline-block;
background-color: white;/*ボタン色*/
border: 1px solid #f4cecf;/*線の色*/
font-weight: 600;
padding: 10px 40px;
margin: 10px auto;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn.letter-spacing:hover {
background-color: #f4cecf;/*線の色*/
letter-spacing: 3px;
color: white;/*文字色*/
}
</style>
④ マウスをのせるとボタンが浮き上がります
HTMLの記述
<div class="btn shadow">Button</div>
CSSの記述
<style type="text/css">
.btn {
position: relative;
display: inline-block;
background-color: white;/*ボタン色*/
border: 1px solid #f4cecf;/*線の色*/
font-weight: 600;
padding: 10px 40px;
margin: 10px auto;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn.shadow {
-webkit-box-shadow: none;
box-shadow: none;
}
.btn.shadow:hover {
-webkit-transform: translate(-2.5px, -2.5px);
transform: translate(-2.5px, -2.5px);
-webkit-box-shadow: 5px 5px 0 0 #f4cecf;
box-shadow: 5px 5px 0 0 #f4cecf;
}
</style>
⑤ マウスをのせるとボタンがへこみます
HTMLの記述
<div class="btn solid">Button</div>
CSSの記述
<style type="text/css">
.btn {
position: relative;
display: inline-block;
background-color: white;/*ボタン色*/
border: 1px solid #f4cecf;/*線の色*/
font-weight: 600;
padding: 10px 40px;
margin: 10px auto;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn.solid {
-webkit-box-shadow: 2px 2px 0 0 #f4cecf;/*影の設定*/
box-shadow: 2px 2px 0 0 #f4cecf;/*影の設定*/
border-radius: 7px;
}
.btn.solid:hover {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
----------------------------------------------
オリジナルヘッダー画像に合わせて、アメブロカスタマイズのダウンロード版を利用すると、カスタマイズをしっかりした状態のアメブロが完成します。
アメブロカスタマイズのダウンロード版
サンプル画面→https://ameblo.jp/kuweb-demo5
※PCからご覧ください
●公式サイトはこちらです↓
Information
Tシャツ作っています
ヘッダーやSNS用の画像各種、承っています
アメブロカスタマイズを承っています
