W3Schools Tryit Editor

main.jsx

index.html

Button.module.css

import { createRoot } from 'react-dom/client';
import styles from './Button.module.css';
function App() {
 return (
 <div>
 <button className={`${styles.mybutton} ${styles.primary}`}>
 My Primary Button
 </button>
 <br/>
 <br/>
 <button className={`${styles.mybutton} ${styles.secondary}`}>
 My Secondary Button
 </button>
 </div>
 );
}
createRoot(document.getElementById('root')).render(
 <App />
);

<!doctype html>
<html lang="en">
 <body>
 <div id="root"></div>
 <script type="module" src="/src/main.jsx"></script>
 </body>
</html>

.mybutton {
 padding: 10px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}
.primary {
 background-color: #007bff;
 color: white;
}
.secondary {
 background-color: #6c757d;
 color: white;
}

⬤ ⬤ ⬤

localhost:5173

[フレーム]