3D Animation Button/style.css
/* Basic */
:root{
    --grey:#778899;
    --yellow:#FFC312;
    --orange:#EE5A24;
    --lightyellow:#FFC312;
    --darkyellow:#C4E538;
    --green:#009432;
    --lightblue:#12CBC4;
    --darkblue:#0652DD;
    --pink:#FDA7DF;
    --violet:#9980FA;
    --white:#fff;
    --defaultpercent:100%;
   --commoncenter:center;
   --commonmeasure:1.25rem;
}

* {
    box-sizing:border-box;
  }

  
  body, html {
      height: var(--defaultpercent);
      width: var(--defaultpercent);
      margin: 0;
      font-family: Arial, sans-serif;
      overflow: hidden;
      background:var(--grey);
      display: flex;
      justify-content: var(--commoncenter);
      align-items: var(--commoncenter);

  }
  
  .container {
      width: 42.5rem;
      position: relative;
  }
  
  /* Buttons */
  .commonbutton {
   border:none;
   margin:var(--commonmeasure);
   padding:calc(2.75rem - var(--commonmeasure));                                
   width:calc(15rem - var(--commonmeasure));
   font-family: sans-serif;
   text-transform: uppercase;
   border-radius: calc(1.625rem - var(--commonmeasure));
   cursor:pointer;
   background-size: calc(var(--defaultpercent) + var(--defaultpercent));
   transition: .06s;
  }
  .btn-one{
      background-image: linear-gradient(to left,var(--yellow),var(--orange),var( --lightyellow));
  }
  .btn-two{
    background-image: linear-gradient(to left,var(--darkyellow),var(--green),var(--darkyellow));
  }
  .btn-three{
    background-image: linear-gradient(to left,var(--lightblue),var(--darkblue),var(--lightblue));
  }
  .btn-four{
    background-image: linear-gradient(to left,var(--pink),var(--violet),var(--pink));
  }
  .commonbutton:hover{
      background-position: right;
  }
  /* .btn::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
       background-color:#1e272e;
       width:100%;
       height:100%;
       transform: translateX(-100%);
       transition: all 0.3s linear;
  }
  .btn:hover:before{
      transform: translateX(0);
      z-index:-1;
  }
  .btn:hover{
      color:#fff;
  } */
  /* .btn:after {
      content: "";
      position: absolute;
      z-index: -1;
      transition: all 04.s;
  }
  */
   .btn-perspective {
      perspective: calc(51.25rem - var(--commonmeasure));
      display: inline-block;
  } 
  
  .btn-3d {
      color: var(--white);
      display: block;
      outline: 1px solid transparent;
      transform-style: preserve-3d;
  }
  
  
  /* Button One */
  /* .btn-one {
      background-color: #E74C3C;
  }
  .btn-one:after {
      width: 100%;
      height: 42%;
      left: 0;
      top: -40%;
      background: #C0392D;
      transform-origin: 0% 100%;
      transform: rotateX(90deg);
  }
  .btn-one:hover {
      transform: rotateX(-45deg);   
  } */
  
  /* Button Two */
  /* .btn-two {
      background-color: #3498DB;
  }
  .btn-two:after {
      width: 100%;
      height: 40%;
      left: 0;
      top: 100%;
      background: #2980D9;
      transform-origin: 0% 0%;
      transform: rotateX(-90deg);
  }
  .btn-two:hover {
      transform: rotateX(35deg);   
  }
  
  /* Button Three */
  /* .btn-three {
      background-color: #C9C;
  }
  .btn-three:after {
      width: 20%;
      height: 100%;
      left: -20%;
      top: 0;
      background: #5e0abe;
      transform-origin:100% 0%;
      transform: rotateY(-90deg);
  }
  .btn-three:hover {
      transform: rotateY(25deg);   
  } */
  
  /* Button Four */
  /* .btn-four {
      background-color: #7f13aa;
  }
  .btn-four:after {
      width: 20%;
      height: 100%;
      left: 100%;
      top: 0;
      background: #8E44AD;
      transform-origin: 0% 0%;
      transform: rotateY(90deg);
  }
  .btn-four:hover {
      transform: rotateY(-25deg);
  }  */
  /* footer{
      align:center;
      color: red;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      font-weight: bolder;
      font-size: xx-large;
      font-style: inherit;
      font-stretch: semi-condensed;
  } */
