hand JSBloqs
hand GutenBloqs
hand kuworking
What?
nochedía
Button-ThankYou
By kuworking
import React, { useState } from 'react'
import styled from '@emotion/styled'

export default () => {
  const [start, setStart] = useState(false)

  return (
    <>
      <link href="https://fonts.googleapis.com/css2?family=Kulim+Park&display=swap" rel="stylesheet"></link>
      <link href="/20201011_iframe.css" type="text/css" rel="stylesheet" />
      <Div id="bloq">
        <div className={start ? 'pressed' : 'not_pressed'} onClick={() => setStart(p => !p)}>
          <div>Click me!</div>
          <div>Thank you!</div>
        </div>
      </Div>
    </>
  )
}

const box = 4
const box1 = 5
const box2 = 6

const boxShadow = p => `inset 0px 0px 0 2px #000, 
${box + p}px ${box + p}px 0 -2px #ffac2f,
${box + p}px ${box + p}px 0 0px #000, 
${box1 + 3 * p}px ${box2 + 3 * p}px 0 -2px #ff1414,
${box1 + 3 * p}px ${box2 + 3 * p}px 0 0px #000`

const Div = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;

  .pressed,
  .not_pressed {
    padding: 10px;
    border-radius: 3px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 500ms cubic-bezier(1, -0.36, 0.88, 0.95);
    & > div {
      text-transform: uppercase;
      font-weight: 700;
      transition: all 500ms cubic-bezier(1, -0.36, 0.88, 0.95);
    }
    & > div:first-of-type {
      position: absolute;
      color: #fff;
    }
    & > div:last-of-type {
      position: absolute;
      color: #000;
    }
  }

  .not_pressed {
    transform: scale(1);
    background: #bcb6ca;
    box-shadow: inset 0px 0px 0 2px #0000, 2px 2px 0 2px #9f7e99, 2px 2px 0 0px #0000, 6px 6px 0 2px #5d576a,
      6px 6px 0 0px #0000;
    width: 100px;

    & > div:first-of-type {
      margin-top: 0px;
    }
    & > div:last-of-type {
      margin-top: -200px;
    }
    &:hover {
      box-shadow: inset 0px 0px 0 2px #0000, 2px 2px 0 2px #000, 2px 2px 0 0px #0000, 6px 6px 0 2px #000,
        6px 6px 0 0px #0000;
    }
  }

  .pressed {
    transform: scale(1.5);
    background: #ffffff;

    width: 200px;

    & > div:first-of-type {
      margin-top: -200px;
    }
    & > div:last-of-type {
      margin-top: 0px;
    }

    animation-name: float;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    transform-style: preserve-3d;
  }

  @keyframes float {
    from {
      background: #bcb6ca;
      box-shadow: inset 0px 0px 0 2px #0000, 2px 2px 0 2px #9f7e99, 2px 2px 0 0px #0000, 6px 6px 0 2px #5d576a,
        6px 6px 0 0px #0000;
    }
    85% {
      box-shadow: ${boxShadow(0)};
    }
    95% {
      box-shadow: ${boxShadow(2)};
    }
    to {
      box-shadow: ${boxShadow(4)};
    }
  }
`
Privacidad
by kuworking.com
[ 2020 >> kuworking ]