React Buttons:

React Button with Selection Effect

In this post, as you can see, we have a button using React. These buttons are black and have a black border. Each button has a black title, but the button itself is white. Clicking on any of these buttons enlarges the title of the button and the color of the button changes to black. These buttons can be placed in several places.

Animating React Button

Javascript React Button

Black and White HTML Button

HTML Button Selection Effect

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

.App {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100vh;
}
.rect {
  fill: none;
  stroke: #000;
  stroke-width: 5;
}
.small {
  fill: #fff;
}
.xs {
  cursor: pointer;
  margin-right: 10px;
  -webkit-tap-highlight-color: transparent;
}
.s {
  cursor: pointer;
  margin-right: 10px;
  -webkit-tap-highlight-color: transparent;
}
.m {
  cursor: pointer;
  margin-right: 10px;
  -webkit-tap-highlight-color: transparent;
}
.l {
  cursor: pointer;
  margin-right: 10px;
  -webkit-tap-highlight-color: transparent;
}
.xl {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

const { useState, useEffect } = React;
const { useSpring, animated, config } = ReactSpring;
const XS = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "xs", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M -8.4653702,-107.80871 H -85.823233 L -1.5378004,25.739445 -86.977828,161.59679 H -13.85348 L 36.948699,75.002164 87.750877,161.59679 H 160.87523 L 75.435198,25.739445 159.72063,-107.80871 H 82.362767 L 36.948699,-25.447599 Z",
        "M 22.510062,12.728233 H 15.124236 L 23.171479,25.478886 15.014,38.450012 H 21.995626 L 26.846019,30.182297 31.696412,38.450012 H 38.678038 L 30.520559,25.478886 38.567801,12.728233 H 31.181976 L 26.846019,20.591748 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 266.80932,-112.81195 C 213.31309,-112.81195 178.29037,-81.253022 178.29037,-32.760034 178.29037,53.449724 289.90122,50.370804 289.90122,86.163248 289.90122,98.094063 281.81906,105.02163 266.03959,105.02163 247.56607,105.02163 232.9412,90.781628 225.62877,75.002164 L 170.59307,102.32758 C 177.52064,122.72542 201.76714,166.60003 262.19094,166.60003 321.07529,166.60003 356.48286,130.80759 356.48286,81.160004 356.48286,-1.2011044 244.10229,2.6475455 244.10229,-33.914629 244.10229,-44.305983 252.56932,-52.003283 265.26986,-52.003283 285.66771,-52.003283 293.74987,-37.378413 299.13798,-25.447599 L 353.78881,-50.463823 C 346.86124,-70.861668 324.53907,-112.81195 266.80932,-112.81195 Z",
        "M 48.792209,12.250542 C 43.684598,12.250542 40.340767,15.263665 40.340767,19.893585 40.340767,28.124555 50.996932,27.830592 50.996932,31.247914 50.996932,32.387021 50.225279,33.048438 48.718718,33.048438 46.954939,33.048438 45.558613,31.688859 44.860451,30.182297 L 39.605859,32.791221 C 40.267276,34.738727 42.582236,38.927702 48.351264,38.927702 53.97331,38.927702 57.353887,35.51038 57.353887,30.770224 57.353887,22.906708 46.62423,23.274162 46.62423,19.783349 46.62423,18.791223 47.432629,18.056315 48.645227,18.056315 50.592733,18.056315 51.364386,19.452641 51.878822,20.591748 L 57.096669,18.203297 C 56.435252,16.255791 54.304018,12.250542 48.792209,12.250542 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 22.510062,12.728233 H 15.124236 L 23.171479,25.478886 15.014,38.450012 H 21.995626 L 26.846019,30.182297 31.696412,38.450012 H 38.678038 L 30.520559,25.478886 38.567801,12.728233 H 31.181976 L 26.846019,20.591748 Z",
        "M 27.170496,25.576262 H 27.16311 L 27.171158,25.589013 27.163,25.601984 H 27.169982 L 27.174832,25.593716 27.179683,25.601984 H 27.186664 L 27.178507,25.589013 27.186554,25.576262 H 27.179168 L 27.174832,25.584126 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 48.792209,12.250542 C 43.684598,12.250542 40.340767,15.263665 40.340767,19.893585 40.340767,28.124555 50.996932,27.830592 50.996932,31.247914 50.996932,32.387021 50.225279,33.048438 48.718718,33.048438 46.954939,33.048438 45.558613,31.688859 44.860451,30.182297 L 39.605859,32.791221 C 40.267276,34.738727 42.582236,38.927702 48.351264,38.927702 53.97331,38.927702 57.353887,35.51038 57.353887,30.770224 57.353887,22.906708 46.62423,23.274162 46.62423,19.783349 46.62423,18.791223 47.432629,18.056315 48.645227,18.056315 50.592733,18.056315 51.364386,19.452641 51.878822,20.591748 L 57.096669,18.203297 C 56.435252,16.255791 54.304018,12.250542 48.792209,12.250542 Z",
        "M 27.196186,25.575785 C 27.191079,25.575785 27.187735,25.578798 27.187735,25.583428 27.187735,25.591659 27.198391,25.591365 27.198391,25.594782 27.198391,25.595921 27.197619,25.596582 27.196113,25.596582 27.194349,25.596582 27.192953,25.595223 27.192255,25.593716 L 27.187,25.596325 C 27.187661,25.598273 27.189976,25.602462 27.195745,25.602462 27.201367,25.602462 27.204748,25.599044 27.204748,25.594304 27.204748,25.586441 27.194018,25.586808 27.194018,25.583317 27.194018,25.582325 27.194827,25.58159 27.196039,25.58159 27.197987,25.58159 27.198759,25.582987 27.199273,25.584126 L 27.204491,25.581737 C 27.203829,25.57979 27.201698,25.575785 27.196186,25.575785 Z"] }) })));
};
const S = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t * t * t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "s", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 41.425644,-141.55091 C -24.254359,-141.55091 -67.253498,-102.80443 -67.253498,-43.267162 -67.253498,62.576872 69.776724,58.796728 69.776724,102.7409 69.776724,117.38896 59.853846,125.89428 40.480608,125.89428 17.799743,125.89428 -0.15594086,108.41112 -9.133783,89.03788 L -76.703858,122.58666 C -68.198534,147.63011 -38.429899,201.49717 35.755428,201.49717 108.05068,201.49717 151.52234,157.55299 151.52234,96.598168 151.52234,-4.5206851 13.547081,0.20449493 13.547081,-44.684716 13.547081,-57.442702 23.942477,-66.893062 39.535572,-66.893062 64.579026,-66.893062 74.501904,-48.937378 81.117156,-34.289319 L 148.21471,-65.00299 C 139.70939,-90.046444 112.30334,-141.55091 41.425644,-141.55091 Z",
        "M 36.532806,12.022309 C 31.425196,12.022309 28.081364,15.035432 28.081364,19.665352 28.081364,27.896322 38.73753,27.602358 38.73753,31.019681 38.73753,32.158788 37.965877,32.820205 36.459315,32.820205 34.695536,32.820205 33.299211,31.460625 32.601049,29.954064 L 27.346456,32.562987 C 28.007874,34.510494 30.322834,38.699469 36.091861,38.699469 41.713908,38.699469 45.094484,35.282147 45.094484,30.54199 45.094484,22.678475 34.364828,23.045929 34.364828,19.555116 34.364828,18.56299 35.173226,17.828082 36.385825,17.828082 38.333331,17.828082 39.104984,19.224407 39.61942,20.363515 L 44.837267,17.975064 C 44.175849,16.027558 42.044616,12.022309 36.532806,12.022309 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 36.532806,12.022309 C 31.425196,12.022309 28.081364,15.035432 28.081364,19.665352 28.081364,27.896322 38.73753,27.602358 38.73753,31.019681 38.73753,32.158788 37.965877,32.820205 36.459315,32.820205 34.695536,32.820205 33.299211,31.460625 32.601049,29.954064 L 27.346456,32.562987 C 28.007874,34.510494 30.322834,38.699469 36.091861,38.699469 41.713908,38.699469 45.094484,35.282147 45.094484,30.54199 45.094484,22.678475 34.364828,23.045929 34.364828,19.555116 34.364828,18.56299 35.173226,17.828082 36.385825,17.828082 38.333331,17.828082 39.104984,19.224407 39.61942,20.363515 L 44.837267,17.975064 C 44.175849,16.027558 42.044616,12.022309 36.532806,12.022309 Z",
        "M 36.220783,25.347551 C 36.215675,25.347551 36.212331,25.350564 36.212331,25.355194 36.212331,25.363425 36.222988,25.363131 36.222988,25.366549 36.222988,25.367688 36.222216,25.368349 36.220709,25.368349 36.218946,25.368349 36.217549,25.36699 36.216851,25.365483 L 36.211597,25.368092 C 36.212258,25.370039 36.214573,25.374228 36.220342,25.374228 36.225964,25.374228 36.229345,25.370811 36.229345,25.366071 36.229345,25.358207 36.218615,25.358575 36.218615,25.355084 36.218615,25.354092 36.219423,25.353357 36.220636,25.353357 36.222583,25.353357 36.223355,25.354753 36.223869,25.355892 L 36.229087,25.353504 C 36.228426,25.351556 36.226295,25.347551 36.220783,25.347551 Z"] }) })));
};
const M = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t * t * t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "m", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 73.217234,85.226318 144.58884,-101.08138 V 111.64308 H 220.59497 V -212.77332 H 117.70863 L 36.604526,-7.4640813 -44.036121,-212.77332 H -146.92246 V 111.64308 H -70.916337 V -101.08138 L 0.45527069,85.226318 Z",
        "M 39.120651,36.127291 44.779443,21.355641 V 38.221779 H 50.805688 V 12.499999 H 42.64821 L 36.217765,28.778211 29.824065,12.499999 H 21.666587 V 38.221779 H 27.692832 V 21.355641 L 33.351624,36.127291 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 39.120651,36.127291 44.779443,21.355641 V 38.221779 H 50.805688 V 12.499999 H 42.64821 L 36.217765,28.778211 29.824065,12.499999 H 21.666587 V 38.221779 H 27.692832 V 21.355641 L 33.351624,36.127291 Z",
        "M 36.239023,31.371628 36.244682,31.356856 V 31.373722 H 36.250708 V 31.348 H 36.242551 L 36.23612,31.364279 36.229726,31.348 H 36.221569 V 31.373722 H 36.227595 V 31.356856 L 36.233254,31.371628 Z"] }) })));
};
const L = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t * t * t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "m", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 176.60445,192.22348 V 119.89579 H 77.331144 V -138.68753 H -3.5056884 V 192.22348 Z",
        "M 42.999997,38.221779 V 32.599733 H 35.283463 V 12.499999 H 28.999999 V 38.221779 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 42.999997,38.221779 V 32.599733 H 35.283463 V 12.499999 H 28.999999 V 38.221779 Z",
        "M 32.507001,25.373751 V 25.368129 H 32.499284 V 25.348029 H 32.493001 V 25.373751 Z"] }) })));
};
const XL = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t * t * t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "xl", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M -10.479428,-113.11409 H -90.695916 L -3.2958616,25.369098 -91.893177,166.24681 H -16.066646 L 36.612839,76.452235 89.292324,166.24681 H 165.11885 L 76.52154,25.369098 163.92159,-113.11409 H 83.705106 L 36.612839,-27.709474 Z",
        "M 23.409583,12.728233 H 16.023757 L 24.071,25.478886 15.913521,38.450012 H 22.895147 L 27.74554,30.182297 32.595933,38.450012 H 39.577558 L 31.42008,25.478886 39.467322,12.728233 H 32.081497 L 27.74554,20.591748 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 345.20687,166.24681 V 105.1865 H 261.3986 V -113.11409 H 193.15472 V 166.24681 Z",
        "M 56.15892,38.450012 V 32.827966 H 48.442386 V 12.728233 H 42.158923 V 38.450012 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 23.409583,12.728233 H 16.023757 L 24.071,25.478886 15.913521,38.450012 H 22.895147 L 27.74554,30.182297 32.595933,38.450012 H 39.577558 L 31.42008,25.478886 39.467322,12.728233 H 32.081497 L 27.74554,20.591748 Z",
        "M 28.023496,25.576262 H 28.01611 L 28.024158,25.589013 28.016,25.601984 H 28.022982 L 28.027832,25.593716 28.032683,25.601984 H 28.039664 L 28.031507,25.589013 28.039554,25.576262 H 28.032168 L 28.027832,25.584126 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 56.15892,38.450012 V 32.827966 H 48.442386 V 12.728233 H 42.158923 V 38.450012 Z",
        "M 28.056,25.601984 V 25.596362 H 28.048283 V 25.576262 H 28.042 V 25.601984 Z"] }) })));
};
function App() {
  const [active, setActive] = useState(-1);
  return /*#__PURE__*/(
    React.createElement("div", { className: "App" }, /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(0) }, /*#__PURE__*/
    React.createElement(XS, { active: active === 0 })), /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(1) }, /*#__PURE__*/
    React.createElement(S, { active: active === 1 })), /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(2) }, /*#__PURE__*/
    React.createElement(M, { active: active === 2 })), /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(3) }, /*#__PURE__*/
    React.createElement(L, { active: active === 3 })), /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(4) }, /*#__PURE__*/
    React.createElement(XL, { active: active === 4 }))));
}
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById("root"));

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@react-spring/web@9.0.0-rc.3/index.umd.js'></script>

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

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@react-spring/web@9.0.0-rc.3/index.umd.js'></script>
<style>
.App {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100vh;
}
.rect {
  fill: none;
  stroke: #000;
  stroke-width: 5;
}
.small {
  fill: #fff;
}
.xs {
  cursor: pointer;
  margin-right: 10px;
  -webkit-tap-highlight-color: transparent;
}
.s {
  cursor: pointer;
  margin-right: 10px;
  -webkit-tap-highlight-color: transparent;
}
.m {
  cursor: pointer;
  margin-right: 10px;
  -webkit-tap-highlight-color: transparent;
}
.l {
  cursor: pointer;
  margin-right: 10px;
  -webkit-tap-highlight-color: transparent;
}
.xl {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
</style>

</head>
<body>
<div id="root"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const { useState, useEffect } = React;
const { useSpring, animated, config } = ReactSpring;
const XS = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "xs", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M -8.4653702,-107.80871 H -85.823233 L -1.5378004,25.739445 -86.977828,161.59679 H -13.85348 L 36.948699,75.002164 87.750877,161.59679 H 160.87523 L 75.435198,25.739445 159.72063,-107.80871 H 82.362767 L 36.948699,-25.447599 Z",
        "M 22.510062,12.728233 H 15.124236 L 23.171479,25.478886 15.014,38.450012 H 21.995626 L 26.846019,30.182297 31.696412,38.450012 H 38.678038 L 30.520559,25.478886 38.567801,12.728233 H 31.181976 L 26.846019,20.591748 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 266.80932,-112.81195 C 213.31309,-112.81195 178.29037,-81.253022 178.29037,-32.760034 178.29037,53.449724 289.90122,50.370804 289.90122,86.163248 289.90122,98.094063 281.81906,105.02163 266.03959,105.02163 247.56607,105.02163 232.9412,90.781628 225.62877,75.002164 L 170.59307,102.32758 C 177.52064,122.72542 201.76714,166.60003 262.19094,166.60003 321.07529,166.60003 356.48286,130.80759 356.48286,81.160004 356.48286,-1.2011044 244.10229,2.6475455 244.10229,-33.914629 244.10229,-44.305983 252.56932,-52.003283 265.26986,-52.003283 285.66771,-52.003283 293.74987,-37.378413 299.13798,-25.447599 L 353.78881,-50.463823 C 346.86124,-70.861668 324.53907,-112.81195 266.80932,-112.81195 Z",
        "M 48.792209,12.250542 C 43.684598,12.250542 40.340767,15.263665 40.340767,19.893585 40.340767,28.124555 50.996932,27.830592 50.996932,31.247914 50.996932,32.387021 50.225279,33.048438 48.718718,33.048438 46.954939,33.048438 45.558613,31.688859 44.860451,30.182297 L 39.605859,32.791221 C 40.267276,34.738727 42.582236,38.927702 48.351264,38.927702 53.97331,38.927702 57.353887,35.51038 57.353887,30.770224 57.353887,22.906708 46.62423,23.274162 46.62423,19.783349 46.62423,18.791223 47.432629,18.056315 48.645227,18.056315 50.592733,18.056315 51.364386,19.452641 51.878822,20.591748 L 57.096669,18.203297 C 56.435252,16.255791 54.304018,12.250542 48.792209,12.250542 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 22.510062,12.728233 H 15.124236 L 23.171479,25.478886 15.014,38.450012 H 21.995626 L 26.846019,30.182297 31.696412,38.450012 H 38.678038 L 30.520559,25.478886 38.567801,12.728233 H 31.181976 L 26.846019,20.591748 Z",
        "M 27.170496,25.576262 H 27.16311 L 27.171158,25.589013 27.163,25.601984 H 27.169982 L 27.174832,25.593716 27.179683,25.601984 H 27.186664 L 27.178507,25.589013 27.186554,25.576262 H 27.179168 L 27.174832,25.584126 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 48.792209,12.250542 C 43.684598,12.250542 40.340767,15.263665 40.340767,19.893585 40.340767,28.124555 50.996932,27.830592 50.996932,31.247914 50.996932,32.387021 50.225279,33.048438 48.718718,33.048438 46.954939,33.048438 45.558613,31.688859 44.860451,30.182297 L 39.605859,32.791221 C 40.267276,34.738727 42.582236,38.927702 48.351264,38.927702 53.97331,38.927702 57.353887,35.51038 57.353887,30.770224 57.353887,22.906708 46.62423,23.274162 46.62423,19.783349 46.62423,18.791223 47.432629,18.056315 48.645227,18.056315 50.592733,18.056315 51.364386,19.452641 51.878822,20.591748 L 57.096669,18.203297 C 56.435252,16.255791 54.304018,12.250542 48.792209,12.250542 Z",
        "M 27.196186,25.575785 C 27.191079,25.575785 27.187735,25.578798 27.187735,25.583428 27.187735,25.591659 27.198391,25.591365 27.198391,25.594782 27.198391,25.595921 27.197619,25.596582 27.196113,25.596582 27.194349,25.596582 27.192953,25.595223 27.192255,25.593716 L 27.187,25.596325 C 27.187661,25.598273 27.189976,25.602462 27.195745,25.602462 27.201367,25.602462 27.204748,25.599044 27.204748,25.594304 27.204748,25.586441 27.194018,25.586808 27.194018,25.583317 27.194018,25.582325 27.194827,25.58159 27.196039,25.58159 27.197987,25.58159 27.198759,25.582987 27.199273,25.584126 L 27.204491,25.581737 C 27.203829,25.57979 27.201698,25.575785 27.196186,25.575785 Z"] }) })));
};
const S = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t * t * t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "s", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 41.425644,-141.55091 C -24.254359,-141.55091 -67.253498,-102.80443 -67.253498,-43.267162 -67.253498,62.576872 69.776724,58.796728 69.776724,102.7409 69.776724,117.38896 59.853846,125.89428 40.480608,125.89428 17.799743,125.89428 -0.15594086,108.41112 -9.133783,89.03788 L -76.703858,122.58666 C -68.198534,147.63011 -38.429899,201.49717 35.755428,201.49717 108.05068,201.49717 151.52234,157.55299 151.52234,96.598168 151.52234,-4.5206851 13.547081,0.20449493 13.547081,-44.684716 13.547081,-57.442702 23.942477,-66.893062 39.535572,-66.893062 64.579026,-66.893062 74.501904,-48.937378 81.117156,-34.289319 L 148.21471,-65.00299 C 139.70939,-90.046444 112.30334,-141.55091 41.425644,-141.55091 Z",
        "M 36.532806,12.022309 C 31.425196,12.022309 28.081364,15.035432 28.081364,19.665352 28.081364,27.896322 38.73753,27.602358 38.73753,31.019681 38.73753,32.158788 37.965877,32.820205 36.459315,32.820205 34.695536,32.820205 33.299211,31.460625 32.601049,29.954064 L 27.346456,32.562987 C 28.007874,34.510494 30.322834,38.699469 36.091861,38.699469 41.713908,38.699469 45.094484,35.282147 45.094484,30.54199 45.094484,22.678475 34.364828,23.045929 34.364828,19.555116 34.364828,18.56299 35.173226,17.828082 36.385825,17.828082 38.333331,17.828082 39.104984,19.224407 39.61942,20.363515 L 44.837267,17.975064 C 44.175849,16.027558 42.044616,12.022309 36.532806,12.022309 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 36.532806,12.022309 C 31.425196,12.022309 28.081364,15.035432 28.081364,19.665352 28.081364,27.896322 38.73753,27.602358 38.73753,31.019681 38.73753,32.158788 37.965877,32.820205 36.459315,32.820205 34.695536,32.820205 33.299211,31.460625 32.601049,29.954064 L 27.346456,32.562987 C 28.007874,34.510494 30.322834,38.699469 36.091861,38.699469 41.713908,38.699469 45.094484,35.282147 45.094484,30.54199 45.094484,22.678475 34.364828,23.045929 34.364828,19.555116 34.364828,18.56299 35.173226,17.828082 36.385825,17.828082 38.333331,17.828082 39.104984,19.224407 39.61942,20.363515 L 44.837267,17.975064 C 44.175849,16.027558 42.044616,12.022309 36.532806,12.022309 Z",
        "M 36.220783,25.347551 C 36.215675,25.347551 36.212331,25.350564 36.212331,25.355194 36.212331,25.363425 36.222988,25.363131 36.222988,25.366549 36.222988,25.367688 36.222216,25.368349 36.220709,25.368349 36.218946,25.368349 36.217549,25.36699 36.216851,25.365483 L 36.211597,25.368092 C 36.212258,25.370039 36.214573,25.374228 36.220342,25.374228 36.225964,25.374228 36.229345,25.370811 36.229345,25.366071 36.229345,25.358207 36.218615,25.358575 36.218615,25.355084 36.218615,25.354092 36.219423,25.353357 36.220636,25.353357 36.222583,25.353357 36.223355,25.354753 36.223869,25.355892 L 36.229087,25.353504 C 36.228426,25.351556 36.226295,25.347551 36.220783,25.347551 Z"] }) })));
};
const M = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t * t * t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "m", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 73.217234,85.226318 144.58884,-101.08138 V 111.64308 H 220.59497 V -212.77332 H 117.70863 L 36.604526,-7.4640813 -44.036121,-212.77332 H -146.92246 V 111.64308 H -70.916337 V -101.08138 L 0.45527069,85.226318 Z",
        "M 39.120651,36.127291 44.779443,21.355641 V 38.221779 H 50.805688 V 12.499999 H 42.64821 L 36.217765,28.778211 29.824065,12.499999 H 21.666587 V 38.221779 H 27.692832 V 21.355641 L 33.351624,36.127291 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 39.120651,36.127291 44.779443,21.355641 V 38.221779 H 50.805688 V 12.499999 H 42.64821 L 36.217765,28.778211 29.824065,12.499999 H 21.666587 V 38.221779 H 27.692832 V 21.355641 L 33.351624,36.127291 Z",
        "M 36.239023,31.371628 36.244682,31.356856 V 31.373722 H 36.250708 V 31.348 H 36.242551 L 36.23612,31.364279 36.229726,31.348 H 36.221569 V 31.373722 H 36.227595 V 31.356856 L 36.233254,31.371628 Z"] }) })));
};
const L = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t * t * t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "m", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 176.60445,192.22348 V 119.89579 H 77.331144 V -138.68753 H -3.5056884 V 192.22348 Z",
        "M 42.999997,38.221779 V 32.599733 H 35.283463 V 12.499999 H 28.999999 V 38.221779 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 42.999997,38.221779 V 32.599733 H 35.283463 V 12.499999 H 28.999999 V 38.221779 Z",
        "M 32.507001,25.373751 V 25.368129 H 32.499284 V 25.348029 H 32.493001 V 25.373751 Z"] }) })));
};
const XL = ({ active }) => {
  const { x } = useSpring({
    x: active ? 0 : 1,
    config: { duration: 500, easing: t => t * t * t } });
  return /*#__PURE__*/(
    React.createElement("svg", { className: "xl", viewBox: "0 0 72 50", height: "50", width: "72" }, /*#__PURE__*/
    React.createElement("rect", { className: "rect", y: "2.5", x: "2.5", height: "45", width: "67" }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M -10.479428,-113.11409 H -90.695916 L -3.2958616,25.369098 -91.893177,166.24681 H -16.066646 L 36.612839,76.452235 89.292324,166.24681 H 165.11885 L 76.52154,25.369098 163.92159,-113.11409 H 83.705106 L 36.612839,-27.709474 Z",
        "M 23.409583,12.728233 H 16.023757 L 24.071,25.478886 15.913521,38.450012 H 22.895147 L 27.74554,30.182297 32.595933,38.450012 H 39.577558 L 31.42008,25.478886 39.467322,12.728233 H 32.081497 L 27.74554,20.591748 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "big",
      d: x.to({
        range: [0, 1],
        output: [
        "M 345.20687,166.24681 V 105.1865 H 261.3986 V -113.11409 H 193.15472 V 166.24681 Z",
        "M 56.15892,38.450012 V 32.827966 H 48.442386 V 12.728233 H 42.158923 V 38.450012 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 23.409583,12.728233 H 16.023757 L 24.071,25.478886 15.913521,38.450012 H 22.895147 L 27.74554,30.182297 32.595933,38.450012 H 39.577558 L 31.42008,25.478886 39.467322,12.728233 H 32.081497 L 27.74554,20.591748 Z",
        "M 28.023496,25.576262 H 28.01611 L 28.024158,25.589013 28.016,25.601984 H 28.022982 L 28.027832,25.593716 28.032683,25.601984 H 28.039664 L 28.031507,25.589013 28.039554,25.576262 H 28.032168 L 28.027832,25.584126 Z"] }) }), /*#__PURE__*/
    React.createElement(animated.path, {
      className: "small",
      d: x.to({
        range: [0, 1],
        output: [
        "M 56.15892,38.450012 V 32.827966 H 48.442386 V 12.728233 H 42.158923 V 38.450012 Z",
        "M 28.056,25.601984 V 25.596362 H 28.048283 V 25.576262 H 28.042 V 25.601984 Z"] }) })));
};
function App() {
  const [active, setActive] = useState(-1);
  return /*#__PURE__*/(
    React.createElement("div", { className: "App" }, /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(0) }, /*#__PURE__*/
    React.createElement(XS, { active: active === 0 })), /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(1) }, /*#__PURE__*/
    React.createElement(S, { active: active === 1 })), /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(2) }, /*#__PURE__*/
    React.createElement(M, { active: active === 2 })), /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(3) }, /*#__PURE__*/
    React.createElement(L, { active: active === 3 })), /*#__PURE__*/
    React.createElement("div", { className: "container", onClick: () => setActive(4) }, /*#__PURE__*/
    React.createElement(XL, { active: active === 4 }))));
}
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById("root"));
</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