これは mdx のボタン

import Button from '../../../components/Button.astro';

<div>
  <Button title="hoge" />
  <Button title="huga" />
  <Button title="piyo" />
</div>

---
const { title } = Astro.props
---
<button>{ title }</button>

<style>
    button {
      background-color: #4CAF50; /* Green background */
      border: none; /* Remove borders */
      color: white; /* White text */
      padding: 6px 32px; /* Padding */
      text-align: center; /* Center text */
      text-decoration: none; /* Remove underline */
      display: inline-block; /* Display as inline block */
      font-size: 16px; /* Font size */
      margin: 4px 2px; /* Margin */
      transition-duration: 0.4s; /* Transition duration */
      cursor: pointer; /* Cursor pointer */
    }

    button:hover {
      background-color: #45a049; /* Darker green */
    }
    </style>