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に関するドキュメントを確認してください。