No.31

リンクをボタン風にする自由装飾
Ver 4.1.1以降、リンクにオプションで任意のクラス名を付与できる記法が実装されたので、配布記事のダウンロードリンクをボタン風に装飾してみました
これ→ボタン
リンクのときこう書く→ [ボタン:CL(lbtn)]任意のURL

/* ボタン(リンク記法) */
a.uc-lbtn {
   display: inline-block;
   box-sizing: border-box;
   min-width: 5rem;
   border-radius: 0.3rem;
   margin: 0.2rem;
   padding: 0.3rem 1rem;
   background-color: 背景色;
   color: 文字色;
   text-decoration: none;
   font-weight: bold;
   text-align: center;
   box-shadow: 2px 2px 2px rgb(0 0 0 / 0.2);
}
a.uc-lbtn:hover { background-color: ホバー時の背景色; box-shadow: 0 0;}


公式ページ:任意のclass名を指定できるオプションをラベルに加えた場合に出力されるHTML

#自由装飾

役に立つかも情報

back