React Button Codesandbox | Button Styling | Reusable Button Component React Typescript

 React Button Codesandbox 


src/index.js

import * as React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

import ButtonNice from "react-button-nice";
import styled from "styled-components";

const btnDefaultStyle = {
padding: "16px 32px",
cursor: "pointer",
fontSize: 16,
color: "white",
border: "none",
borderRadius: "40px",
outline: "none",
width: 300
};

const marginStyle = {
display: "block",
marginBottom: 32
};

const secondStyle = {
...btnDefaultStyle,
borderRadius: "4px"
};

class App extends React.PureComponent {
state = { clicked: 0 };
render() {
return (
<div className="App">
<h1>React buttonice</h1>
<br />

<ButtonNice alpha={0.3} style={marginStyle}>
<button
onClick={() =>
this.setState(prev => ({ clicked: prev.clicked + 1 }))
}
style={{
...btnDefaultStyle,
backgroundColor: "#843CC7"
}}
>
Clicked {this.state.clicked} times
</button>
</ButtonNice>

<ButtonNice style={marginStyle}>
<button style={{ ...secondStyle, backgroundColor: "#FE707C" }}>
Example button #2
</button>
</ButtonNice>

<ButtonNice speed={0.2} style={marginStyle}>
<button style={{ ...secondStyle, backgroundColor: "#FB638A" }}>
Example button #3
</button>
</ButtonNice>

<ButtonNice disabled style={marginStyle}>
<button style={{ ...btnDefaultStyle, backgroundColor: "#F8549D" }}>
Disabled button
</button>
</ButtonNice>

<ButtonNice style={marginStyle}>
<Button>Styled-Component Button</Button>
</ButtonNice>

<ButtonNice wrapperColor="rgb(0, 96, 255)" style={marginStyle}>
<ButtonWhite>Styled-Component Button</ButtonWhite>
</ButtonNice>

<ButtonNice wrapperColor="rgb(0, 96, 255)" style={marginStyle}>
<ButtonA>Styled Component Link</ButtonA>
</ButtonNice>
</div>
);
}
}

export default App;

const Button = styled.button`
background-color: #0060ff;
border-radius: 4px;
cursor: pointer;
padding: 16px 32px;
border: none;
color: white;
font-size: 16px;
outline: none;
`;

const ButtonWhite = styled(Button)`
border: 1px #0060ff solid;
background-color: white;
color: #0060ff;
`;

const ButtonA = styled.a`
background-color: #0060ff;
border-radius: 4px;
cursor: pointer;
padding: 16px 32px;
border: none;
color: white;
font-size: 16px;
outline: none;
`;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

src/styles.css

.App {
text-align: center;
height: 100vh;
font-family: sans-serif;
}

.App > div {
display: block;
}

.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}

.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}

.App-title {
font-size: 1.5em;
}

.App-intro {
font-size: large;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

package.json

{
"name": "react-button-nice-demo",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"react": "16.5.2",
"react-button-nice": "1.0.5",
"react-dom": "16.5.2",
"react-scripts": "2.0.3",
"styled-components": "4.1.1"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}


Beautiful CSS buttons examples In this article you'll see how to style a button using CSS. My goal here is mostly to showcase how different CSS rules and styles The style attribute specifies the style, i.e. look and feel, of the <button> element. A style contains any number of CSS property/value pairs,


Tags

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.