<div id="app"></div>
* {
  box-sizing: border-box;
}

body, html, #app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
const styled = styled.default


function ValueInterface({ value, click }) {
  const shade = 225 - (value * 25);
  const size = (1 / 5 * value) + 1;
  
    const Modern = styled.button`
    position: relative;
    font-size: 20px;
    // display: inline-block;
    width: 100%;
    padding: 10px;
    display: block;
    border-width: 0;
    background: none;
    outline: 0 !important;
    cursor: pointer;   
    // color: rgb(${shade}, ${shade}, ${shade});
    // transform: scale(${size});

    // &::before {
    //   display: inline-block;
    //   content: "❤";
    // }
  `;
  
  const string = value < 1 && ' Click here to add likes!';
  return <Modern onClick={click}>{string}</Modern>;          
}



function Markup({ liked, addLike }) {
  const Overlay = styled.div`
    height: 100%;
    width: 100%;
    // background: rgba(0, 0, 0, 0.4);
    // display: flex;
    // justify-content: center;
    // align-items: center;
  `;
  
  const Popup = styled.div`
    // border-radius: 8px;
    border: 1px solid grey;
    // padding: 2rem;
    background: white;
    // min-width: 240px;
    // max-width: 80%;
    // box-shadow: 
    //   0 7px 8px -4px rgba(0,0, 0, 0.2),
    //   0 13px 19px 2px rgba(0, 0, 0, 0.14),
    //   0 5px 24px 4px rgba(0, 0, 0, 0.12);
  `;

  const Title = styled.h2`
    // margin-bottom: 2rem;
  `
  
  const Button = styled.button`
    border-width: 0;
    // border-radius: 4px;
    background-color: #e0e1e2;
    color: #5c5c5c;
    // padding: 1rem;
    // box-shadow: 
    //   0 1px 3px 0 rgba(0,0,0,.2), 
    //   0 1px 1px 0 rgba(0,0,0,.14), 
    //   0 2px 1px -1px rgba(0,0,0,.12);
    cursor: pointer;
    // font-weight: 700;
    // margin-top: 2rem;
    // margin-right: 0.75rem;
    width: 100%;

    &:hover {
      background-color: #c6c8c9;
    }
  `

  return (
    <Overlay>
      <Popup>
        <Title>How much do you like popups?</Title>
        <form>
          <ValueInterface value={liked} click={addLike} />
          <input type="hidden" name="liked" value={liked} />
          <Button type="submit">Submit</Button>
        </form>
      </Popup>
    </Overlay>
  );
}


class Example extends React.Component {
  constructor(...params) {
    super(...params);
    
    this.state = {
      liked: 0,
    }
    
    this.events = {
      addLike: this.addLike.bind(this),
    }
  }
  
  addLike(event) {
    const { liked } = this.state;
    event.preventDefault();
    this.setState({ liked: liked > 8 ? liked : liked + 1 })
  }
  
  render() {
    const { liked } = this.state;
    const { addLike } = this.events;
    return <Markup {...{ liked, addLike }} />;
  }
}


ReactDOM.render(
  <Example />,
  document.getElementById('app'),
)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js
  3. https://unpkg.com/styled-components/dist/styled-components.min.js