背景にドットをcssで敷きつめる

スクリーンショット 2020-06-02 10.30.31.png
一部使う場面があるかもしれませんので、cssにて背景にドットを配置するやりかたです。

index.html
<div class="m-bg-dot">
  <a href="" class="m-btn">ボタンの線を<br>グラデーション</a>
</div>
dot.scss
.m-bg-dot{
  position: relative;//※ボタンを中央に置くための設定なので外して大丈夫です。※
  max-width: 500px;
  min-height: 300px;
  margin: 70px auto;
  background: #f4f4f4;
  background-image: 
    radial-gradient(#ddd 30%,transparent 31%),
    radial-gradient(#ddd 30%,transparent 31%);//①ドットの色を変更
  background-size: 20px 20px;//②ドットの大きさ変更
  background-position: 10px 10px;//③ドットの配置場所
}

cssってなんでもできるなと思いました。

枠線をグラデーションに

上記キャプチャのボタンです。htmlは変わりないのでcssだけ記載します。

btn.scss
.m-btn{
  position: absolute;//※ボタンを中央に置くための設定なので外して大丈夫です。※
  top: 50%;//※ボタンを中央に置くための設定なので外して大丈夫です。※
  left: 50%;//※ボタンを中央に置くための設定なので外して大丈夫です。※
  transform: translate(-50%, -50%);//※ボタンを中央に置くための設定なので外して大丈夫です。※
  display: block;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  padding: 20px;
  background: #ededed;
  width: 100%;
  max-width: 300px;
  text-align: center;
  border: 3px solid #ccc;//①まず枠線を引く
  border-image: linear-gradient(125deg, #00a7ff,#053e62) 1/3;
  //②125度に傾いたグラデーション。グラデーションの開始色と終了色。border-image-sliceを1に設定し太さを3pxに。
}

参考元:
https://firstlayout.net/border-gradation/
https://note.com/pulpstyle