Tech Blog

日本語

繁體中文

日本語

繁體中文

Appearance

ボタンのモジュール化の考察 ​

SCSSは Codepen に記載してあります。
Codepen

ボタンの土台（Plain） ​

html
<button type="button" class="c-btn">Button</button>
<button type="button" class="c-btn">Button</button>

テーマ色（Theme Color） ​

html
<button type="button" class="c-btn c-btn--primary">Button</button>
<button type="button" class="c-btn c-btn--primary">Button</button>

アウトライン（Outline） ​

html
<button type="button" class="c-btn c-btn--primaryOutline">Button</button>
<button type="button" class="c-btn c-btn--primaryOutline">Button</button>

ホバー：透過（Hover: Opacity） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--hoverOpa">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--hoverOpa">Button</button>

ホバー：暗くなる（Hover: Darken） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--hoverDarken">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--hoverDarken">Button</button>

ホバー：明るくなる（Hover: Lighten） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--hoverLighten">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--hoverLighten">Button</button>

ホバー：逆転（Hover: Reverse） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--hoverRe">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--hoverRe">Button</button>

矢印：ライン（Arrow Line） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineRight">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineUp">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineDown">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineLeft">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineRight">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineUp">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineDown">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineLeft">Button</button>

Hover Example：

html
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineRight c-btn--hoverRe">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowLineRight c-btn--hoverRe">Button</button>

矢印：Solid（Arrow Solid） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidRight">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidUp">Button</button>  
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidDown">Button</button>  
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidLeft">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidRight">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidUp">Button</button>  
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidDown">Button</button>  
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidLeft">Button</button>

Hover Example：

html
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidRight c-btn--hoverRe">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--arrowSolidRight c-btn--hoverRe">Button</button>

アイコン付き：SVG（Icon SVG） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--icon">
  <svg class="c-btn_icon" xmlns="http://www.w3.org/2000/svg" width="17.189" height="21.126" viewBox="0 0 17.189 21.126"><g id="PDFアイコン" transform="translate(-47.706)" stroke="none"><path id="Path_4149" data-name="Path 4149" d="M61.351,0H53.788L53.4.384,48.09,5.7l-.384.384v11.5a3.548,3.548,0,0,0,3.544,3.544h10.1A3.548,3.548,0,0,0,64.9,17.582V3.544A3.548,3.548,0,0,0,61.351,0Zm2.232,17.582a2.232,2.232,0,0,1-2.232,2.232H51.25a2.232,2.232,0,0,1-2.232-2.232V6.626h3.454a1.86,1.86,0,0,0,1.86-1.86V1.312h7.019a2.232,2.232,0,0,1,2.232,2.232Z"></path><path id="Path_4150" data-name="Path 4150" d="M136.268,252.785H135.09a.337.337,0,0,0-.358.364v3.043a.412.412,0,1,0,.823,0v-.925a.03.03,0,0,1,.034-.034h.678a1.229,1.229,0,1,0,0-2.449Zm-.051,1.737h-.628a.03.03,0,0,1-.034-.033v-.959a.03.03,0,0,1,.034-.034h.628a.514.514,0,1,1,0,1.026Z" transform="translate(-83.435 -242.355)"></path><path id="Path_4151" data-name="Path 4151" d="M220.9,252.785H220a.337.337,0,0,0-.358.364v3.088a.332.332,0,0,0,.358.359h.9c.812,0,1.317-.258,1.519-.88a4.738,4.738,0,0,0,0-2.051C222.215,253.043,221.71,252.785,220.9,252.785Zm.729,2.645c-.1.3-.37.432-.751.432h-.381a.03.03,0,0,1-.034-.034v-2.275a.03.03,0,0,1,.034-.034h.381c.382,0,.656.129.751.432a4.126,4.126,0,0,1,0,1.48Z" transform="translate(-164.837 -242.355)"></path><path id="Path_4152" data-name="Path 4152" d="M309.863,252.785h-1.849a.337.337,0,0,0-.359.364v3.043a.413.413,0,1,0,.824,0v-1.087a.029.029,0,0,1,.033-.033h1.076a.354.354,0,1,0,0-.706h-1.076a.03.03,0,0,1-.033-.034v-.8a.03.03,0,0,1,.033-.034h1.351a.357.357,0,1,0,0-.712Z" transform="translate(-249.223 -242.355)"></path></g></svg> 
  ダウンロード
</button>
<button type="button" class="c-btn c-btn--primary c-btn--icon">
  <svg class="c-btn_icon" xmlns="http://www.w3.org/2000/svg" width="17.189" height="21.126" viewBox="0 0 17.189 21.126"><g id="PDFアイコン" transform="translate(-47.706)" stroke="none"><path id="Path_4149" data-name="Path 4149" d="M61.351,0H53.788L53.4.384,48.09,5.7l-.384.384v11.5a3.548,3.548,0,0,0,3.544,3.544h10.1A3.548,3.548,0,0,0,64.9,17.582V3.544A3.548,3.548,0,0,0,61.351,0Zm2.232,17.582a2.232,2.232,0,0,1-2.232,2.232H51.25a2.232,2.232,0,0,1-2.232-2.232V6.626h3.454a1.86,1.86,0,0,0,1.86-1.86V1.312h7.019a2.232,2.232,0,0,1,2.232,2.232Z"></path><path id="Path_4150" data-name="Path 4150" d="M136.268,252.785H135.09a.337.337,0,0,0-.358.364v3.043a.412.412,0,1,0,.823,0v-.925a.03.03,0,0,1,.034-.034h.678a1.229,1.229,0,1,0,0-2.449Zm-.051,1.737h-.628a.03.03,0,0,1-.034-.033v-.959a.03.03,0,0,1,.034-.034h.628a.514.514,0,1,1,0,1.026Z" transform="translate(-83.435 -242.355)"></path><path id="Path_4151" data-name="Path 4151" d="M220.9,252.785H220a.337.337,0,0,0-.358.364v3.088a.332.332,0,0,0,.358.359h.9c.812,0,1.317-.258,1.519-.88a4.738,4.738,0,0,0,0-2.051C222.215,253.043,221.71,252.785,220.9,252.785Zm.729,2.645c-.1.3-.37.432-.751.432h-.381a.03.03,0,0,1-.034-.034v-2.275a.03.03,0,0,1,.034-.034h.381c.382,0,.656.129.751.432a4.126,4.126,0,0,1,0,1.48Z" transform="translate(-164.837 -242.355)"></path><path id="Path_4152" data-name="Path 4152" d="M309.863,252.785h-1.849a.337.337,0,0,0-.359.364v3.043a.413.413,0,1,0,.824,0v-1.087a.029.029,0,0,1,.033-.033h1.076a.354.354,0,1,0,0-.706h-1.076a.03.03,0,0,1-.033-.034v-.8a.03.03,0,0,1,.033-.034h1.351a.357.357,0,1,0,0-.712Z" transform="translate(-249.223 -242.355)"></path></g></svg> 
  ダウンロード
</button>

Hover Example：

html
<button type="button" class="c-btn c-btn--primary c-btn--icon c-btn--hoverRe">
  <svg class="c-btn_icon" xmlns="http://www.w3.org/2000/svg" width="17.189" height="21.126" viewBox="0 0 17.189 21.126"><g id="PDFアイコン" transform="translate(-47.706)" stroke="none"><path id="Path_4149" data-name="Path 4149" d="M61.351,0H53.788L53.4.384,48.09,5.7l-.384.384v11.5a3.548,3.548,0,0,0,3.544,3.544h10.1A3.548,3.548,0,0,0,64.9,17.582V3.544A3.548,3.548,0,0,0,61.351,0Zm2.232,17.582a2.232,2.232,0,0,1-2.232,2.232H51.25a2.232,2.232,0,0,1-2.232-2.232V6.626h3.454a1.86,1.86,0,0,0,1.86-1.86V1.312h7.019a2.232,2.232,0,0,1,2.232,2.232Z"></path><path id="Path_4150" data-name="Path 4150" d="M136.268,252.785H135.09a.337.337,0,0,0-.358.364v3.043a.412.412,0,1,0,.823,0v-.925a.03.03,0,0,1,.034-.034h.678a1.229,1.229,0,1,0,0-2.449Zm-.051,1.737h-.628a.03.03,0,0,1-.034-.033v-.959a.03.03,0,0,1,.034-.034h.628a.514.514,0,1,1,0,1.026Z" transform="translate(-83.435 -242.355)"></path><path id="Path_4151" data-name="Path 4151" d="M220.9,252.785H220a.337.337,0,0,0-.358.364v3.088a.332.332,0,0,0,.358.359h.9c.812,0,1.317-.258,1.519-.88a4.738,4.738,0,0,0,0-2.051C222.215,253.043,221.71,252.785,220.9,252.785Zm.729,2.645c-.1.3-.37.432-.751.432h-.381a.03.03,0,0,1-.034-.034v-2.275a.03.03,0,0,1,.034-.034h.381c.382,0,.656.129.751.432a4.126,4.126,0,0,1,0,1.48Z" transform="translate(-164.837 -242.355)"></path><path id="Path_4152" data-name="Path 4152" d="M309.863,252.785h-1.849a.337.337,0,0,0-.359.364v3.043a.413.413,0,1,0,.824,0v-1.087a.029.029,0,0,1,.033-.033h1.076a.354.354,0,1,0,0-.706h-1.076a.03.03,0,0,1-.033-.034v-.8a.03.03,0,0,1,.033-.034h1.351a.357.357,0,1,0,0-.712Z" transform="translate(-249.223 -242.355)"></path></g></svg> 
  ダウンロード
</button>
<button type="button" class="c-btn c-btn--primary c-btn--icon c-btn--hoverRe">
  <svg class="c-btn_icon" xmlns="http://www.w3.org/2000/svg" width="17.189" height="21.126" viewBox="0 0 17.189 21.126"><g id="PDFアイコン" transform="translate(-47.706)" stroke="none"><path id="Path_4149" data-name="Path 4149" d="M61.351,0H53.788L53.4.384,48.09,5.7l-.384.384v11.5a3.548,3.548,0,0,0,3.544,3.544h10.1A3.548,3.548,0,0,0,64.9,17.582V3.544A3.548,3.548,0,0,0,61.351,0Zm2.232,17.582a2.232,2.232,0,0,1-2.232,2.232H51.25a2.232,2.232,0,0,1-2.232-2.232V6.626h3.454a1.86,1.86,0,0,0,1.86-1.86V1.312h7.019a2.232,2.232,0,0,1,2.232,2.232Z"></path><path id="Path_4150" data-name="Path 4150" d="M136.268,252.785H135.09a.337.337,0,0,0-.358.364v3.043a.412.412,0,1,0,.823,0v-.925a.03.03,0,0,1,.034-.034h.678a1.229,1.229,0,1,0,0-2.449Zm-.051,1.737h-.628a.03.03,0,0,1-.034-.033v-.959a.03.03,0,0,1,.034-.034h.628a.514.514,0,1,1,0,1.026Z" transform="translate(-83.435 -242.355)"></path><path id="Path_4151" data-name="Path 4151" d="M220.9,252.785H220a.337.337,0,0,0-.358.364v3.088a.332.332,0,0,0,.358.359h.9c.812,0,1.317-.258,1.519-.88a4.738,4.738,0,0,0,0-2.051C222.215,253.043,221.71,252.785,220.9,252.785Zm.729,2.645c-.1.3-.37.432-.751.432h-.381a.03.03,0,0,1-.034-.034v-2.275a.03.03,0,0,1,.034-.034h.381c.382,0,.656.129.751.432a4.126,4.126,0,0,1,0,1.48Z" transform="translate(-164.837 -242.355)"></path><path id="Path_4152" data-name="Path 4152" d="M309.863,252.785h-1.849a.337.337,0,0,0-.359.364v3.043a.413.413,0,1,0,.824,0v-1.087a.029.029,0,0,1,.033-.033h1.076a.354.354,0,1,0,0-.706h-1.076a.03.03,0,0,1-.033-.034v-.8a.03.03,0,0,1,.033-.034h1.351a.357.357,0,1,0,0-.712Z" transform="translate(-249.223 -242.355)"></path></g></svg> 
  ダウンロード
</button>

アイコン付き：Fontawesome（Icon Fontawesome） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--icon">
  <i class="fab fa-apple"></i>fontawesome 5.15.1
</button>
<button type="button" class="c-btn c-btn--primary c-btn--icon">
  <i class="fab fa-apple"></i>fontawesome 5.15.1
</button>

Hover Example：

html
<button type="button" class="c-btn c-btn--primary c-btn--icon c-btn--hoverRe">
  <i class="fab fa-apple"></i>fontawesome 5.15.1
</button>
<button type="button" class="c-btn c-btn--primary c-btn--icon c-btn--hoverRe">
  <i class="fab fa-apple"></i>fontawesome 5.15.1
</button>

角丸（Rounded） ​

html
<button type="button" class="c-btn c-btn--primary c-btn--rounded">Button</button>
<button type="button" class="c-btn c-btn--primary c-btn--rounded">Button</button>