(ページの作成:「.button-link a { display: inline-block; padding: 0.4em 1.2em; background-color: #3b82f6; color: #fff !important; border-radius: 0.4em; text-decoration: none; font-weight: bold; transition: 0.2s ease-in-out; } .button-link a:hover { background-color: #2563eb; }」) |
編集の要約なし |
||
(同じ利用者による、間の2版が非表示) | |||
2行目: | 2行目: | ||
display: inline-block; | display: inline-block; | ||
padding: 0.4em 1.2em; | padding: 0.4em 1.2em; | ||
border-radius: 0.5em; | |||
text-decoration: none; | |||
font-weight: bold; | |||
transition: background-color 0.2s; | |||
} | |||
/* 色別 */ | |||
.button-link.blue a { | |||
background-color: #3b82f6; | background-color: #3b82f6; | ||
color: #fff !important; | color: #fff !important; | ||
} | } | ||
.button-link a:hover { | .button-link.blue a:hover { | ||
background-color: #2563eb; | background-color: #2563eb; | ||
} | |||
.button-link.red a { | |||
background-color: #ef4444; | |||
color: #fff !important; | |||
} | |||
.button-link.red a:hover { | |||
background-color: #dc2626; | |||
} | |||
.button-link.green a { | |||
background-color: #10b981; | |||
color: #fff !important; | |||
} | |||
.button-link.green a:hover { | |||
background-color: #059669; | |||
} | |||
/* 丸み */ | |||
.button-link.round a { | |||
border-radius: 9999px; | |||
} | |||
/* サイズ */ | |||
.button-link.large a { | |||
font-size: 1.1em; | |||
padding: 0.7em 1.5em; | |||
} | |||
.button-link.small a { | |||
font-size: 0.85em; | |||
padding: 0.3em 0.8em; | |||
} | } |
2025年3月28日 (金) 18:13時点における最新版
.button-link a { display: inline-block; padding: 0.4em 1.2em; border-radius: 0.5em; text-decoration: none; font-weight: bold; transition: background-color 0.2s; } /* 色別 */ .button-link.blue a { background-color: #3b82f6; color: #fff !important; } .button-link.blue a:hover { background-color: #2563eb; } .button-link.red a { background-color: #ef4444; color: #fff !important; } .button-link.red a:hover { background-color: #dc2626; } .button-link.green a { background-color: #10b981; color: #fff !important; } .button-link.green a:hover { background-color: #059669; } /* 丸み */ .button-link.round a { border-radius: 9999px; } /* サイズ */ .button-link.large a { font-size: 1.1em; padding: 0.7em 1.5em; } .button-link.small a { font-size: 0.85em; padding: 0.3em 0.8em; }