コピペで装飾

ボタン編

　　カンタンな使い方

コピーしたいボタン箇所のをクリックすると、自動的にコピーされます。
# の部分を、飛ばしたいページのURLに変えて下さい。
青文字は、ボタン内に表示されるものです。適宜任意のものに変更頂いて構いません。

注意・" = < > などの記号が1つでも欠けてしまうと、正常に表示されなくなるのでいじらないよう気をつけて下さい。
　　　　・コードの途中で改行をしないで下さい。見た目が崩れる可能性があります。

 コード例：
<a href="#"style="text-decoration: none;">
<p style="background-color:orangered;color:white;padding:10px 17px;width:fit-content;border-radius:20px;display:block;margin:0 auto;">詳しくはコチラから</p></a>

LINEボタン

LINE 友だち追加

<a href="#"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加" height="36" border="0" style=" width:auto;" ></a>
  
  ↑注意：「#」 に、任意の公式LINE追加URLを入れてください。

シンプルなボタン

詳しくはコチラから

朱色

<a href="#" style="text-decoration: none;">
<p style="background-color:orangered;color:white;padding:10px 17px;width:fit-content;border-radius:20px;display:block;margin:0 auto;">詳しくはコチラから</p></a>

濃い赤色

  <a href="#"style="text-decoration: none;">
<p style=" background-color: rgb(179, 0, 27);color: white;padding:10px 17px;width:fit-content;border-radius:20px;display:block;margin:0 auto;">詳しくはコチラから</p></a>

灰色

<a href="#"style="text-decoration: none;">
<p style="background-color: rgb(220, 220, 220);color: black;padding:10px 17px;width:fit-content;border-radius:20px;display:block;margin:0 auto;">詳しくはコチラから</p></a>

青色

<a href="#"style="text-decoration: none;">
<p style="background-color: rgb(12, 18, 177);color:white;padding:10px 17px;width:fit-content;border-radius:20px;display:block;margin:0 auto;">詳しくはコチラから</p></a>

縁取りがあるボタン

詳しくはコチラから

朱色

<a href="#"style="text-decoration: none;">
<p style="padding: 10px 17px;width: fit-content;border-radius: 20px;border: solid 2px rgb(23, 23, 23);width:fit-content;background-color: orangered;color: white;display:block;margin:0 auto;">詳しくはコチラから</p></a>

濃い赤色

<a href="#"style="text-decoration: none;">
<p style="padding: 10px 17px;width: fit-content;border-radius: 20px;border: solid 2px rgb(23, 23, 23);width:fit-content; background-color: rgb(179, 0, 27);color: white;display:block;margin:0 auto;">詳しくはコチラから</p></a>

灰色

<a href="#"style="text-decoration: none;">
<p style="padding: 10px 17px;width: fit-content;border-radius: 20px;border: solid 2px rgb(23, 23, 23);width:fit-content;background-color: rgb(220, 220, 220);color: black;display:block;margin:0 auto;">詳しくはコチラから</p></a>

白色

<a href="#"style="text-decoration: none;">
<p style="padding: 10px 17px;width: fit-content;border-radius: 20px;border: solid 2px rgb(23, 23, 23);width:fit-content;background-color:white;color: black;display:block;margin:0 auto;">詳しくはコチラから</p></a>

立体的なボタン

詳しくはコチラから

朱色

<a href="#"style="text-decoration: none;">
<p style=" color: #000;border-bottom: 5px solid #3a3a3a;padding:10px 15px;border-radius:12px;width:fit-content;background-color: orangered;color: white;display:block;margin:0 auto;">詳しくはコチラから</p></a>

濃い赤色

<a href="#"style="text-decoration: none;">
<p style=" color: #000;border-bottom: 5px solid #3a3a3a;padding:10px 15px;border-radius:12px;width:fit-content; background-color: rgb(179, 0, 27);color: white;display:block;margin:0 auto;">詳しくはコチラから</p></a>

灰色

<a href="#"style="text-decoration: none;">
<p style=" color: #000;border-bottom: 5px solid #3a3a3a;padding:10px 15px;border-radius:12px;width:fit-content;background-color: rgb(220, 220, 220);color: black;display:block;margin:0 auto;">詳しくはコチラから</p></a>