React Buttons:

Dynamic Text Generating and Color Change Effect with React Buttons

The buttons we put in this post all use React. These buttons have different colors. The width of the buttons also varies. Each button has a white title. By clicking on each button, a phrase is written below the buttons in which the title of the button is placed. Also, another text with a color equal to the color of the button is placed below this text.

HTMl Colorful React Button Code

React JS Text Generation

React Button Text Color

Text Effect using React

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
  font-family: "Inconsolata", monospace;
  display: flex;
  justify-content: center;
}
h1 {
  font-size: 1px;
}
h1, h2, p {
  text-align: center;
  color: #222;
}
p {
  font-size: 20px;
  width: 50%;
  max-width: 800px;
  margin: 5% auto;
  text-align: left;
}
.container {
  width: 80%;
  max-width: 600px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

const white = '#999999';
const primary = '#3C91E6';
const success = '#9BE564';
const info = '#C0E8F9';
const warning = '#F95738';
const danger = '#FF3C38';
const Button = props => {
  let color;
  const style = {
    'background': null,
    'width': 100 + '%',
    'height': 50,
    'border': 'none',
    'text-align': 'center',
    'cursor': 'pointer',
    'text-transform': 'uppercase',
    'outline': 'none',
    'overflow': 'hidden',
    'position': 'relative',
    'color': '#fff',
    'font-weight': 700,
    'font-size': 15,
    'padding': '17px 60px',
    'margin': 10,
    'box-shadow': '0 5px 15px rgba(0,0,0,0.20)' };
  const checkType = type => {
    switch (type) {
      case 'primary':
        return primary;
      case 'success':
        return success;
      case 'info':
        return info;
      case 'warning':
        return warning;
      case 'danger':
        return danger;
      default:
        return white;}
  };
  const checkSize = size => {
    switch (size) {
      case 'small':
        return 180;
      case 'medium':
        return 280;
      case 'large':
        return 600;}
  };
  style['background'] = checkType(props.type);
  style['max-width'] = checkSize(props.size);
  const handleClick = () => {
    const type = props.type;
    const size = props.size;
    color = checkType(type);
    props.changeColor(color, type, size);
  };
  return /*#__PURE__*/(
    React.createElement("button", { style: style, onClick: handleClick }, props.type));
};
const Container = props => {
  return /*#__PURE__*/React.createElement("div", { className: "container" }, props.children);
};
const Heading = () => /*#__PURE__*/React.createElement("h1", null, "");
const Info = props => {
  const style = { 'color': props.color };
  return /*#__PURE__*/(
    React.createElement("p", { style: style }, props.show ? /*#__PURE__*/React.createElement("h2", null, "This button has the props of ", props.size, " and  ", props.type) : /*#__PURE__*/React.createElement("h2", null, "Click a button"), "Lorizzle ipsum dolor boom shackalack cool, consectetizzle adipiscing elizzle. Nullam crazy velizzle, break yo neck, yall volutpizzle, suscipizzle quizzle, black vizzle, arcu. Fo pizzle tortizzle. Yippiyo black. Yippiyo ass dolor away turpis tempus sizzle. Maurizzle pellentesque ghetto fo shizzle turpizzle. Da bomb izzle tortizzle."));
};
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: null,
      type: null,
      size: null,
      show: false };
    this.changeColor = this.changeColor.bind(this);
  }
  changeColor(color, type, size) {
    this.setState({
      color,
      type,
      size,
      show: true });
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Heading, null), /*#__PURE__*/
      React.createElement(Container, null, /*#__PURE__*/
      React.createElement(Button, { type: "default", changeColor: this.changeColor.bind(this), size: "small" }), /*#__PURE__*/
      React.createElement(Button, { type: "primary", changeColor: this.changeColor.bind(this), size: "small" }), /*#__PURE__*/
      React.createElement(Button, { type: "success", changeColor: this.changeColor.bind(this), size: "small" }), /*#__PURE__*/
      React.createElement(Button, { type: "info", changeColor: this.changeColor.bind(this), size: "medium" }), /*#__PURE__*/
      React.createElement(Button, { type: "warning", changeColor: this.changeColor.bind(this), size: "medium" }), /*#__PURE__*/
      React.createElement(Button, { type: "danger", changeColor: this.changeColor.bind(this), size: "large" })), /*#__PURE__*/
      React.createElement(Info, { color: this.state.color, type: this.state.type, size: this.state.size, show: this.state.show })));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('app'));

<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<style>
body {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
  font-family: "Inconsolata", monospace;
  display: flex;
  justify-content: center;
}
h1 {
  font-size: 1px;
}
h1, h2, p {
  text-align: center;
  color: #222;
}
p {
  font-size: 20px;
  width: 50%;
  max-width: 800px;
  margin: 5% auto;
  text-align: left;
}
.container {
  width: 80%;
  max-width: 600px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const white = '#999999';
const primary = '#3C91E6';
const success = '#9BE564';
const info = '#C0E8F9';
const warning = '#F95738';
const danger = '#FF3C38';
const Button = props => {
  let color;
  const style = {
    'background': null,
    'width': 100 + '%',
    'height': 50,
    'border': 'none',
    'text-align': 'center',
    'cursor': 'pointer',
    'text-transform': 'uppercase',
    'outline': 'none',
    'overflow': 'hidden',
    'position': 'relative',
    'color': '#fff',
    'font-weight': 700,
    'font-size': 15,
    'padding': '17px 60px',
    'margin': 10,
    'box-shadow': '0 5px 15px rgba(0,0,0,0.20)' };
  const checkType = type => {
    switch (type) {
      case 'primary':
        return primary;
      case 'success':
        return success;
      case 'info':
        return info;
      case 'warning':
        return warning;
      case 'danger':
        return danger;
      default:
        return white;}
  };
  const checkSize = size => {
    switch (size) {
      case 'small':
        return 180;
      case 'medium':
        return 280;
      case 'large':
        return 600;}
  };
  style['background'] = checkType(props.type);
  style['max-width'] = checkSize(props.size);
  const handleClick = () => {
    const type = props.type;
    const size = props.size;
    color = checkType(type);
    props.changeColor(color, type, size);
  };
  return /*#__PURE__*/(
    React.createElement("button", { style: style, onClick: handleClick }, props.type));
};
const Container = props => {
  return /*#__PURE__*/React.createElement("div", { className: "container" }, props.children);
};
const Heading = () => /*#__PURE__*/React.createElement("h1", null, "");
const Info = props => {
  const style = { 'color': props.color };
  return /*#__PURE__*/(
    React.createElement("p", { style: style }, props.show ? /*#__PURE__*/React.createElement("h2", null, "This button has the props of ", props.size, " and  ", props.type) : /*#__PURE__*/React.createElement("h2", null, "Click a button"), "Lorizzle ipsum dolor boom shackalack cool, consectetizzle adipiscing elizzle. Nullam crazy velizzle, break yo neck, yall volutpizzle, suscipizzle quizzle, black vizzle, arcu. Fo pizzle tortizzle. Yippiyo black. Yippiyo ass dolor away turpis tempus sizzle. Maurizzle pellentesque ghetto fo shizzle turpizzle. Da bomb izzle tortizzle."));
};
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: null,
      type: null,
      size: null,
      show: false };
    this.changeColor = this.changeColor.bind(this);
  }
  changeColor(color, type, size) {
    this.setState({
      color,
      type,
      size,
      show: true });
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Heading, null), /*#__PURE__*/
      React.createElement(Container, null, /*#__PURE__*/
      React.createElement(Button, { type: "default", changeColor: this.changeColor.bind(this), size: "small" }), /*#__PURE__*/
      React.createElement(Button, { type: "primary", changeColor: this.changeColor.bind(this), size: "small" }), /*#__PURE__*/
      React.createElement(Button, { type: "success", changeColor: this.changeColor.bind(this), size: "small" }), /*#__PURE__*/
      React.createElement(Button, { type: "info", changeColor: this.changeColor.bind(this), size: "medium" }), /*#__PURE__*/
      React.createElement(Button, { type: "warning", changeColor: this.changeColor.bind(this), size: "medium" }), /*#__PURE__*/
      React.createElement(Button, { type: "danger", changeColor: this.changeColor.bind(this), size: "large" })), /*#__PURE__*/
      React.createElement(Info, { color: this.state.color, type: this.state.type, size: this.state.size, show: this.state.show })));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('app'));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS