그냥 버튼 만들기

그냥 만들어보았다

 

 

// 하이 버튼
import styled from "styled-components";

function Button1() {
  return (
    <>
      <h1>버튼1</h1>
      <Button>
        <button className="button">
          <span>하이</span>
        </button>
      </Button>
    </>
  );
}

export default Button1;

const Button = styled.div`
  .button {
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #ffffff;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    &::after {
      content: ">>";
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
  }

  .button:hover span {
    padding-right: 25px;

    &::after {
      content: ">>";
      position: absolute;
      opacity: 1;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
  }
`;

 

//눌르고싶은 버튼
import styled from "styled-components";

function Button2() {
  return (
    <Button>
      <button className="button rainbow">
        <span>눌르고 싶은 버튼</span>
      </button>
    </Button>
  );
}

export default Button2;

const Button = styled.div`
  .button {
    border-radius: 4px;
    
    
    border: none;

    color: #ffffff;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: fit-content;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }

  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
  }

  .button:hover {
    background-color: aliceblue;
    color: #000000;
  }

  @keyframes rainbow {
    0% {
      background-color #ff2a2a;
    }
    15% {
        background-color #ff7a2a;
    }
    30% {
      background-color #ffc52a;
    }
    45% {
      background-color #43ff2a;
    }
    60% {
      background-color #2a89ff;
    }
    75% {
      background-color #202082;
    }
    90% {
     background-color #6b2aff;
    }
    100% {
        background-color #e82aff;
    }
  }
  .rainbow {
    animation: rainbow 1s infinite;
  }
`;