Reactで簡単に実装できるボタンアニメーションの作り方

Reactを使用すると、ボタンアニメーションを簡単に実装できます。この記事では、Reactを使用してCSSアニメーションを追加する方法を紹介します。

まず、Reactでボタンを作成します。以下のコードを使用して、ボタンを作成します。

import React from 'react';
import './Button.css';

function Button(props) {
  return (
    <button className="btn">{props.text}</button>
  );
}

export default Button;

上記のコードでは、Button.cssファイルをインポートしています。これは、ボタンのスタイルを定義するために使用されます。

次に、Button.cssファイルを開いて、以下のスタイルを追加します。

.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.btn:hover::before {
  opacity: 1;
}

.btn:active {
  transform: translateY(2px);
}

上記のスタイルでは、::before疑似要素を使用して、ボタンの上に透明なレイヤーを追加しています。これにより、ボタンがホバーされたときに背景色が表示されるようになります。

また、:hoverと:active疑似クラスを使用して、ボタンのアニメーションを追加しています。ホバーされたときに、透明度が1になります。クリックされたときに、少し下に移動するように変形します。

これで、Reactで簡単にボタンアニメーションを作成することができます。詳細については、ReactとCSSに関するドキュメントを確認してください。