日別アーカイブ: 2021年8月9日

色々なボタンのつくりかた

コメントを残す

様々なボタンのつくりかたをまとめてみた

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;
   }
  }
 }

続きを読む →