- サイズ
- 塗り
- Disable
- Box
- アイコンのみ
- アイコン+テキスト
使い方
[data-ico]にマテリアルアイコンのコードを指定することで任意のアイコンを表示します。
アイコンの形によって左右の隙間が違うのでセンタリングの完全対応が難しく、形によっては目の錯覚でセンタリングされてないように見える場合があります。さらにFirefoxではアイコンがズレて表示されるっぽい。
気になる場合は個別対応してください。
.btn {
width: fit-content;
min-width: 64px;
text-align: center;
border-radius: var(--radius-round);
color: var(--txt-link);
display: block;
cursor: pointer;
transition: .2s;
}
.btn.min {padding: 4px 12px; font-size: .8rem;}
.btn.xs {padding: 8px 16px; font-size: .9rem;}
.btn.xm {padding: 10px 24px;}
.btn.xl {padding: 12px 32px; font-size: 1.1rem;}
.btn.full {width: 100%; display: block;}
.btn.box {border-radius: var(--radius-xs);}
.btn.outline {border: 1px solid var(--txt-link);}
.btn.fill {
background: var(--txt-link);
color: var(--white-main);
}
.btn:hover {background: #E3F2FD;}
.btn.outline:hover {
background: var(--txt-link);
color: var(--white-main);
}
.btn.fill:hover {
background: var(--txt-link);
filter: grayscale(30%);
}
.btn.trg {color: var(--txt-light);}
.btn.trg.outline {
border: 1px solid var(--line-main);
background: var(--bg-paper);
}
.btn.trg.fill {
background: #e8f0fe;
color: var(--txt-link);
}
.btn.trg:hover {
background: var(--hover);
color: var(--txt-main);
}
.btn.trg.fill:hover {
background: #c9dafc;
color: #174ea6;
}
.btn.dsbl {
color: var(--txt-disabled);
pointer-events: none;
}
.btn.dsbl.outline {border-color: var(--txt-disabled);}
.btn.dsbl.fill {background-color: var(--bg-disabled);}
.btn.ico-mui {
min-width: 0;
padding: 8px;
font-size: var(--typo-bd);
}
.btn.ico-mui.xs {
width: 32px;
height: 32px;
}
.btn.ico-mui.xm {
width: 40px;
height: 40px;
}
.btn.ico-mui.xl {
width: 48px;
height: 48px;
}
.btn.ico-mui.xs {font-size: var(--typo-bd);}
.btn.ico-mui.xm {font-size: var(--typo-h4);}
.btn.ico-mui.xl {font-size: var(--typo-h1);}
.btn.ico-mui,
.btn.ico-bef,
.btn.ico-aft {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.btn.ico-mui::before ,
.btn.ico-bef::before ,
.btn.ico-aft::after {width: 24px;}
.btn.xs.ico-mui::before ,
.btn.xs.ico-bef::before ,
.btn.xs.ico-aft::after {font-size: var(--typo-h5);}
.btn.xl.ico-mui::before ,
.btn.xl.ico-bef::before ,
.btn.xl.ico-aft::after {
width: auto;
height: auto;
}
.btn.ico-bef::before {margin-left: -4px;}
.btn.ico-aft::after {margin-right: -4px;}