LINE風の登録はこちら風のボタン風バナーCSS

2023年7月30日

LINE「風」ボタンをサイトに設置したい時のコード雛形です。覚え書き。コピペはOKです。いつも通り動作の保証は致しかねます。(ご自身のWordpressなどサイトに入っているCSSが優先されますので思い通りに動かない場合は環境を見てください)

このようなボタンをCSSで作成します(以下のボタンはダミーです。クリックしたらトップページへ飛びます)

LINEボタンです

LINE風ボタンコード覚え書き

LINE風ボタンHTML

<center>
<div class="button-line">
	<a href="LINEページのURL">LINEボタンです</a>
</div>
</center>

LINE風ボタンCSS

上記のHTMLに対するCSS

/*LINE*/
.button-line a {
    background: #06c755;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 25em;/*幅*/
    padding: 15px 15px;/*文字横空白*/
    color: #fff!important;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    color: #fff!important;
    text-decoration: none;
	border-radius: 40px;/*丸み*/
	 border: 1px solid #c18f21;
	font-size: 1.2rem;/*文字サイズ*/
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);  /*影*/
}

 /*文字前アイコン*/
.button-line a:before {
    position: relative;
    font-family: "Font Awesome 5 Free";
	content: '\f4ad';
  font-weight: 900;
    margin-right: 8px;
    color: #fff;
}

 /*マウスホバー時演出*/
.button-line a:hover {
    background: #66cdaa;
    color: #FFF;
}

カスタマイズのご依頼はこちらから

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

主にWordpress中心のサイト・ブログ制作＆コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ＆Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

カスタマイズのご依頼は「一木堂」へ

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。