start_style.css

/* Animation properties */
.star {
    animation: star 10s ease-out infinite;
  }
  .wars {
    animation: wars 10s ease-out infinite;
  }
  .byline span {
    animation: spin-letters 10s linear infinite;
  }
  .byline {
    animation: move-byline 10s linear infinite;
  }

  /* Keyframes */
  @keyframes star {
    0% {
      opacity: 0;
      transform: scale(1.5) translateY(-0.75em);
    }
    20% {
      opacity: 1;
    }
    89% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: translateZ(-1000em);
    }
  }

  @keyframes wars {
    0% {
      opacity: 0;
      transform: scale(1.5) translateY(0.5em);
    }
    20% {
      opacity: 1;
    }
    90% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: translateZ(-1000em);
    }
  }

  @keyframes spin-letters {
    0%, 10% {
      opacity: 0;
      transform: rotateY(90deg);
    }
    30% {
      opacity: 1;
    }
    70%, 86% {
      transform: rotateY(0);
      opacity: 1;
    }
    95%, 100% {
      opacity: 0;
    }
  }

  @keyframes move-byline {
    0% {
      transform: translateZ(5em);
    }
    100% {
      transform: translateZ(0);
    }
  }

  /* Make the 3D work on the container */
  .starwars-demo {
    perspective: 800px;
    transform-style: preserve3d;
  }

  /* General styles and layout */
  body {
    background: #000 url(https://cssanimation.rocks/demo/starwars/images/bg.jpg);
  }

  .flex_container{
    display: flex;
    flex-direction: column;
  }

  .button_row{
    width: 90%;
    margin : 50% auto;
    text-align: center;
  }
  .starwars-demo {
    height: 17em;
    left: 50%;
    position: absolute;
    top: 53%;
    transform: translate(-50%, -50%);
    width: 34em;
  }

  .byline span {
    display: inline-block;
  }

  img {
    width: 100%;
  }

  .star, .wars, .byline {
    position: absolute;
  }

  .star {
    top: -0.75em;
  }

  .wars {
    bottom: -0.5em;
  }

  .byline {
    color: #fff;
    font-family: "ITC Serif Gothic", Lato;
    font-size: 2.25em;
    left: -7em;
    letter-spacing: 0.4em;
    right: -7em;
    text-align: center;
    text-transform: uppercase;
    top: 29%;
  }

  /*** Media queries for adjusting to different screen sizes ***/

  @media only screen and (max-width: 600px) {
    .starwars-demo {
      font-size: 10px;
    }
  }

  @media only screen and (max-width: 480px) {
    .starwars-demo {
      font-size: 7px;
    }
  }

  button {
    margin: 20px;
  }
  .custom-btn {
    width: 145px;
    height: 55px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
  }

  .btn-8 {

  background-image: linear-gradient(315deg, #f0ecfc 0% );
    line-height: 42px;
    padding: 0;
    border: none;
  }
  .btn-8 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  .btn-8:before,
  .btn-8:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;

    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
      inset -4px -4px 6px 0 rgba(255,255,255,.5),
      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
    transition: all 0.3s ease;
  }
  .btn-8:before{
     height: 0%;
     width: 2px;
  }
  .btn-8:after {
    width: 0%;
    height: 2px;
  }
  .btn-8:hover:before {
    height: 100%;
  }
  .btn-8:hover:after {
    width: 100%;
  }
  .btn-8:hover{
    background: transparent;
  }

  .btn-8 span:before,
  .btn-8 span:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;

    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
      inset -4px -4px 6px 0 rgba(255,255,255,.5),
      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
    transition: all 0.3s ease;
  }
  .btn-8 span:before {
    width: 2px;
    height: 0%;
  }
  .btn-8 span:after {
    height: 2px;
    width: 0%;
  }
  .btn-8 span:hover:before {
    height: 100%;
  }
  .btn-8 span:hover:after {
    width: 100%;
  }