## Solution 1: functional
```js
import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  
  &:hover {
    background-color: lightblue;
    color: black;
  }
`;

const App = () => {
  return (
    <StyledButton>Click me!</StyledButton>
  );
};

export default App;
```
The `StyledButton` component is created by passing a template literal to the `styled.button` method.
The styles defined in the template literal specify the button's background color, font color, font size, padding, border radius, cursor, and transition. The `&:hover` selector is used to change the button's background color and font color when the user hovers over the button.
The `App` component returns the `StyledButton` component, which will display the button with the defined styles. Finally, the `App` component is exported as the default export.
## Solution 2: class-based
```js
import React, { Component } from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  &:hover {
    background-color: lightblue;
    color: black;
  }
`;

class App extends Component {
  render() {
    return (
      <StyledButton>Click me!</StyledButton>
    );
  }
}

export default App;
```


<p>Create a component called <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">App</code> that renders a <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">button</code> with the text <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">Click me!</code>.</p>
<p>The button should have the following styles:</p>
<ul>
<li>A solid <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">blue</code> background color</li>
<li>A <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">white</code> text color</li>
<li>A font size of <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">16px</code></li>
<li>A padding of <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">10px 20px</code> height and width respectively</li>
<li>A border-radius of <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">5px</code></li>
<li>A cursor type of <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">pointer</code></li>
<li>A hover effect that changes the background color to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">light blue</code> and the text color to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">black</code></li>
</ul>
<p><img src="https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/06-2023/image.lmBEm-96S1ZD1ViNYrLQO.gif" alt="image"/></p>
<h2>Instructions</h2>
<ul>
<li>You can use <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">styled-components</code>, <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">in-line css</code>, <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">App.css</code> file or any other library to achieve the desired result</li>
<li>Your component should return just one <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">button</code> JSX element</li>
<li>The button should contain string <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">Click me!</code></li>
</ul>
<blockquote>
<p>Make sure that you copy paste button text, to match it exactly. All the tests are based on the text written in button. Make sure to avoid any extra spaces in the button text</p>
</blockquote>

Styled Button

Instructions