[React] ボタンのCSS調整！

はじめに

今回は、ボタンの見栄えを向上させるCSSの調整について紹介します！

1. ボタンのスタイリング

まずは、基本的なボタンのスタイリングを行います。
以下のCSSコードを使用して、ボタンの高さ、幅、フォントサイズ、影、角丸などを設定します！
また、.button:hoverを用いることで、カーソルが乗ったときのホバーも表現できます！

/* src/styles/Button.module.css */

.button {
  width: 35%;
  height: 100px;
  margin-top: 20px;
  font-size: 30px;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  background-color: #499ef9;
}

.button:hover {
  box-shadow: 0px 10px 3px rgba(0, 0, 0, 0.5);
  transform: scale(0.98);
}

2. ボタンコンポーネントの作成

次に、このcssを適用するボタンコンポーネントを作成します！

// components/Button.jsx

import React from "react";
import styles from "../styles/Button.module.css";

const Button = () => {
  return (
    <button className={styles.button}>
      Click me
    </button>
  );
};

export default Button;

3. ボタンを使用

最後に、作成したボタンコンポーネントを使用します！

// pages/index.jsx

import React from "react";
import Button from "../components/Button";

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button />
    </div>
  );
};

export default HomePage;

まとめ

今回は、ボタンの見栄えを向上させるCSSの調整について紹介しました！
記事を参考にして、自分のプロジェクトに合わせてボタンをカスタマイズしてみてください！