様々なボタンのつくりかたをまとめてみた
HTML部分
<body>
<div id="container">
<button class="btn float">Button</button>
<button class="btn filled">Button</button>
<button class="btn letter-spacing">Button</button>
<button class="btn shadow">Button</button>
<button class="btn solid">Button</button>
</body>SCSSの部分
$cWhite: white;
$cBlack: black;
&.btn {
position: relative;
display: inline-block;
background-color: $cWhite;
border: 1pxsolid$cBlack;
font-weight: 600;
padding: 10px40px;
margin: 10pxauto;
cursor: pointer;
transition: all0.3s;
color: $cBlack;
text-decoration: none!important;
&.float:hover {
background-color: $cBlack;
color: $cWhite;
box-shadow: 5px5px10px0rgba(0, 0, 0, 0.5);
} &.filled {
background-color: $cBlack;
color: $cWhite;
box-shadow: 5px5px10px0rgba(0, 0, 0, 0.5);
&:hover {
background-color: $cWhite;
color: $cBlack;
box-shadow: none;
}
}
&.letter-spacing:hover {
background-color: $cBlack;
letter-spacing: 3px;
color: $cWhite;
}
&.shadow {
box-shadow: none;
&:hover {
transform: translate(-2px, -2px);
box-shadow: 5px5px00$cBlack;
} }
&.solid {
box-shadow: 2px2px00$cBlack;
border-radius: 7px;
&:hover {
transform: translate(2px, 2px);
box-shadow: none;
}
}
}
※ポイント
&.float:hover {
background-color: $cBlack;
color: $cWhite;
box-shadow: 5px5px10px0rgba(0, 0, 0, 0.5);
}ココでマウスオーバーしたときに背景色、文字色、影の設定をしているよ
&.filled {
background-color: $cBlack;
color: $cWhite;
box-shadow: 5px5px10px0rgba(0, 0, 0, 0.5);
&:hover {
background-color: $cWhite;
color: $cBlack;
box-shadow: none;
}
}&.filledでデフォルトの状態を決めているよ
&.letter-spacing:hover {
background-color: $cBlack;
letter-spacing: 3px;
color: $cWhite;
}ココでletter-spacingにより行間が増えてボタンが伸びているように見えるよ
&.shadow {
box-shadow: none;
&:hover {
transform: translate(-2px, -2px);
box-shadow: 5px5px00$cBlack;
}
}transform: translate(-2px, -2px);ココで左上に伸びているようにしていて
box-shadow: 5px5px00$cBlack;↑影の部分を担当しているよ
&.solid {
box-shadow: 2px2px00$cBlack;
border-radius: 7px;
&:hover {
transform: translate(2px, 2px);
box-shadow: none;
}
}
&.solid {
box-shadow: 2px2px00$cBlack;
border-radius: 7px;
}ココで影の部分とボタンの丸みの部分
&:hover {
transform: translate(2px, 2px);
box-shadow: none;
}
}