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
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);
.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,
