Crea un componente de un Botón con un diseño bonito
Aquí tienes un código para integrar in botón desde react en javascript

javascript

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

const Button = ({text, onClick}) => {
  return (
    <button className="button" onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

Aquí tienes uno para css:

css

.button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  background-color: blue;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

.button:active {
  transform: translateY(2px);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

Este componente se puede usar en otro componente de la siguiente manera:

javascript

import React, {useState} from 'react';
import Button from './Button';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Button text="Click me" onClick={() => setCount(count + 1)} />
      <p>You've clicked the button {count} times.</p>
    </div>
  );
};

export default App;

Espero haberte ayudado, si necesitas otra cosa solo dime
Below is an instruction that describes a task. Write a response that appropriately completes the request.

### Instruction:

Crea un componente de un Botón con un diseño bonito

### Response:

Aquí tienes un código para integrar in botón desde react en javascript

javascript

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

const Button = ({text, onClick}) => {
  return (
    <button className="button" onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

Aquí tienes uno para css:

css

.button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  background-color: blue;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

.button:active {
  transform: translateY(2px);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

Este componente se puede usar en otro componente de la siguiente manera:

javascript

import React, {useState} from 'react';
import Button from './Button';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Button text="Click me" onClick={() => setCount(count + 1)} />
      <p>You've clicked the button {count} times.</p>
    </div>
  );
};

export default App;

Espero haberte ayudado, si necesitas otra cosa solo dime
