~アメブロの記事の書き方~

【アメブロ】コピペだけで作れるボタンのコードを紹介!

Ameblo

今回はコピペだけで作れるボタンコードを紹介したいと思います。ボタンを作るためにはプログラミングであるHTMLとCSSの言語が分かっていないとできません。しかし、そんなの勉強できないという人向けに今回は作成しましたので、よかったら使ってみてください。

ということでさっそくみていきましょう。

立体的なボタン

ボタン

<p style="text-align: center;"><a style="display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8; color: #fff; border-bottom: solid 4px #627295; border-radius: 3px;" href="リンク">ボタン</a></p>

矢印つきのボタン


ボタン

<a href="リンク" style=" position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00BCD4;
  background: #ECECEC;
  transition: .4s;">
  <i class="fa fa-caret-right"></i> ボタン
</a>

シンプルな二重線のボタン

ボタン

<p style="text-align: center;"><a style="display: inline-block; padding: 0.5em 1em; text-decoration: none; color: #000000; border: double 4px #000000; border-radius: 3px; transition: .4s;" href="リンク">ボタン</a></p>

まとめ

ということで今回は、アメブロでコピペだけで作れるボタンを紹介しました。どうだったでしょうか?できるのであれば、HTMLとCSS程度であればプログラミングは覚えるのにそんなに時間はかかりません。なので、時間があるのであれば覚えてしまいましょう。

Ameblo
スポンサーリンク



ライフスタイルコーチ│八木のBLOG
タイトルとURLをコピーしました