Web
Analytics

花太郎BLOG

夫婦で始めた日々のblog日記。色々な事を発信していきます♪

花太郎BLOG4

 NEW! PICKUP
● 夏!『2カ月で8キロ減量』ダイエット録
●『本当に美味しい』テイクアウト、その他グルメレビューをお届け♪
●『LINEおばさん絵文字』注※スタンプじゃなくて絵文字です

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

 

読者のみなさまへ

いつもご訪問いただきありがとうございます。

7月4日(土)~7月12日(日)まで一足早い夏休みをいただきます。

記事はいつも通り毎朝6時に更新されますが、日ごろのように読者様の記事を見に行くことができないかもしれません。戻ってまいりましたら、いつものようにお邪魔させていただきますが、よろしければ不在の間もご愛読いただければ幸いです。また、Twitterでは毎日なにかしら発信してると思いますので、よろしければこの機会にフォローいただけると嬉しいです。フォローバックします。

夏バテに気をつけお体ご自愛ください。

花太郎ブログTwitterを見る

By.はや太郎&しょこちゅん

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

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

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

 

 

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

 

前回の記事を見る▶

 

 

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

 

 

それでは、さっそく見ていきましょう(^^) オーッ

 

 

 

01.【BOTTON1】

 

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

 

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

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

 

 

02.【BOTTON2】

 

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

 

  1. <style type="text/css"><!--
  2. /*BUTTON2*/
  3. .btn-flat-vertical-border {
  4. position: relative;
  5. display: inline-block;
  6. font-weight: bold;
  7. padding: 0.5em 1em;
  8. text-decoration: none;
  9. border-left: solid 4px #668ad8;
  10. border-right: solid 4px #668ad8;
  11. color: #668ad8;
  12. background: #e1f3ff;
  13. transition: .4s;
  14. }
  15. .btn-flat-vertical-border:hover {
  16. background: #668ad8;
  17. color: #FFF;
  18. }
  19. --></style>
  20. <center><a href="#" class="btn-flat-vertical-border" style="text-decoration: none;" target="_blank"> BUTTON2 </a></center>

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

 

 

03.【BOTTON3】

 

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

 

  1. <style type="text/css"><!--
  2. /*BUTTON3*/
  3. .btn-circle-flat {
  4. display: inline-block;
  5. text-decoration: none;
  6. background: #87befd;
  7. color: #FFF;
  8. width: 120px;
  9. height: 120px;
  10. line-height: 120px;
  11. border-radius: 50%;
  12. text-align: center;
  13. overflow: hidden;
  14. transition: .4s;
  15. }
  16. .btn-circle-flat:hover {
  17. background: #668ad8;
  18. }
  19. --></style>
  20. <center><a href="#" class="btn-circle-flat" style="text-decoration: none;" target="_blank"> BUTTON3 </a></center>

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

 

 

 

04.【BOTTON4】

 

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

 

  1. <style type="text/css"><!--
  2. /*BUTTON4*/
  3. .btn-circle-fishy {
  4. display: inline-block;
  5. text-decoration: none;
  6. color: #FFF;
  7. width: 120px;
  8. height: 120px;
  9. line-height: 120px;
  10. border-radius: 50%;
  11. text-align: center;
  12. overflow: hidden;
  13. background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
  14. transition: .4s;
  15. }
  16. .btn-circle-fishy:hover {
  17. -webkit-transform: rotate(10deg);
  18. transform: rotate(10deg);
  19. }
  20. --></style>
  21. <center><a href="#" class="btn-circle-fishy" style="text-decoration: none;" target="_blank"> BUTTON4 </a></center>

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

 

 

05.【BOTTON5】

 

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

 

  1. <style type="text/css"><!--
  2. /*BUTTON5*/
  3. .btn-cross {
  4. display: inline-block;
  5. position: relative;
  6. padding: 0.25em 1.5em;
  7. border-top: solid 1px black;
  8. border-bottom: solid 1px black;
  9. text-decoration: none;
  10. font-weight: bold;
  11. color: #03A9F4;
  12. }
  13. .btn-cross:before, .btn-cross:after {
  14. content: '';
  15. position: absolute;
  16. top: -7px;
  17. width: 2px;
  18. height: -webkit-calc(100% + 14px);
  19. height: calc(100% + 14px);
  20. background-color: black;
  21. transition: .3s;
  22. }
  23. .btn-cross:before {
  24. left: 7px;
  25. }
  26. .btn-cross:after {
  27. right: 7px;
  28. }
  29. .btn-cross:hover:before {
  30. top: 0px;
  31. left:0;
  32. height: 100%;
  33. }
  34. .btn-cross:hover:after {
  35. top: 0px;
  36. right: 0;
  37. height: 100%;
  38. }
  39. --></style>
  40. <center><a href="#" class="btn-cross" style="text-decoration: none;" target="_blank"> BUTTON5 </a></center>

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

 

 

 

06.【BOTTON6】

 

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

 

  1. <style type="text/css"><!--
  2. /*BUTTON6*/
  3. .btn-top-radius {
  4. position: relative;
  5. display: inline-block;
  6. font-weight: bold;
  7. padding: 8px 10px 5px 10px;
  8. text-decoration: none;
  9. color: #FFA000;
  10. background: #fff1da;
  11. border-bottom: solid 4px #FFA000;
  12. border-radius: 15px 15px 0 0;
  13. transition: .4s;
  14. }
  15. .btn-top-radius:hover {
  16. background: #ffc25c;
  17. color: #FFF;
  18. }
  19. --></style>
  20. <center><a href="#" class="btn-top-radius" style="text-decoration: none;" target="_blank"> BUTTON6 </a></center>

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

 

 

07.【BOTTON7】

 

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

 

  1. <style type="text/css"><!--
  2. /*BUTTON7*/
  3. .btn-circle-border-double {
  4. display: inline-block;
  5. text-decoration: none;
  6. color: #668ad8;
  7. width: 120px;
  8. height: 120px;
  9. line-height: 120px;
  10. border-radius: 50%;
  11. border: double 4px #668ad8;
  12. text-align: center;
  13. overflow: hidden;
  14. transition: .6s;
  15. }
  16. .btn-circle-border-double:hover {
  17. -webkit-transform: rotateY(360deg);
  18. transform: rotateY(360deg);
  19. }
  20. --></style>
  21. <center><a href="#" class="btn-circle-border-double" style="text-decoration: none;" target="_blank"> BUTTON7 </a></center>

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

 

 

 

最後に

f:id:shokochun:20191209232123j:plain

 はい、いかがだったでしょうか🤗

 

本当はサイトで紹介されているボタン全部やりたかったのですが、ものによってはうまくいかないのがいくつかありました。

 

その中でも、きちんと再現できたのだけを今回はのせています。

 

私も、色々いじっていく中で、今後もうまくできたのがあれば、また記事にしたいと思います。

 

 

皆さんは記事を書きながらうまくカスタマイズできていますか?

私は不器用なのか壁にぶち当たる事が多いです。

でも、私より不器用で困ってる人が他にもいるかもと思い、まとめてみました。

 

 

逆にもっといいのがあれば教えてほしいです(^^)

 

 

それでは

本日も最後までご覧いただきありがとうございました!

次の記事は12/16(月)更新♪を予定しておりますのでお楽しみに!

 

それではまた次の記事でお会いしましょうー。

またねー(^-^)

(※2019.12.14現在の情報となります) 

 

 

ランキングに参加しています、クリックしていただければ励みになります☺

※沢山のブロガーが登録しているランキングサイトになります。変なサイトではないのでご安心下さい。

ブログランキング・にほんブログ村へにほんブログ村

f:id:shokochun:20191214204018j:plain

 

f:id:shokochun:20191130000857j:plain

 

 

・【重宝する無料ソフト・サイト】どっとうpろだ・リサイズ超簡単!Pro。使い方を教える >

はてなブログ関連 - 花太郎BLOG

 

 

プライバシーポリシー  お問い合わせ

©2019.花太郎BLOG.All rights reserved