Skip to content

Instantly share code, notes, and snippets.

@garrettmac
Created March 28, 2019 16:40
Show Gist options
  • Save garrettmac/a580a572e0341c283b62f6afd1a5b970 to your computer and use it in GitHub Desktop.
Save garrettmac/a580a572e0341c283b62f6afd1a5b970 to your computer and use it in GitHub Desktop.
React at CodePen
<div id="app"></app>
class App extends React.Component {
constructor() {
super();
}
clicky = () => {
alert("clicked the button");
}
render() {
return (
<React.Fragment>
<p><Button onClick={this.clicky} color="light">Light Button</Button></p>
<p><Button onClick={this.clicky} color="dark">Dark Button</Button></p>
<p><Button onClick={this.clicky} color="secondary">Secondary Button</Button></p>
<p><Button onClick={this.clicky} color="light" disabled={true}>Disabled Button</Button></p>
</React.Fragment>
);
}
}
class Button extends React.Component {
constructor() {
super();
}
render() {
const buttonColor = `button--${this.props.color}`;
return (
<button
type="button"
className={`button ${buttonColor}`}
disabled={this.props.disabled}
onClick={this.props.onClick}
>{this.props.children}</button>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
p {
margin-bottom: 10px;
}
.button {
background: none;
border: none;
transition: all 0.3s ease;
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
letter-spacing: 1.4px;
line-height: 1.4;
font-size: 14px;
padding: 1.42rem 1.4rem 1.2rem;
}
.button--light {
border: 1px solid #000;
background-color: #fff;
}
.button--light:hover {
background: #000;
color: #fff;
border-color: #000;
}
.button--dark {
color: #fff;
border: 1px solid #000;
background-color: #000;
}
.button--dark:hover {
color: #000;
background-color: #fff;
}
.button--secondary {
color: #fff;
border: 1px solid #d22030;
background-color: #d22030;
}
.button--secondary:hover {
background-color: #ea5a67;
}
.button:disabled {
color: #494949;
cursor: not-allowed;
border-color: #dbdbdb;
background-color: #dbdbdb;
}
@garrettmac
Copy link
Author

asd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment