<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>////////</title>

    <style type="text/css">
    #container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    img {
      width:450px;
    }
    *, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #0f0e12;
}

button {
  position: relative;
  background: none;
  border: none;
  color: #fefb66;
  font-size: 2em;
  padding: 1em;
  white-space: nowrap;
  transition: color 250ms;
  z-index: 0;
}

button:hover {
  color: #0f0e12;
}

button:hover::after {
  opacity: 1;
}

button::before,
button::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 32px solid transparent;
  z-index: -1;
}

button::before {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Cpath d='M83,96.87l15-17.31A12,12,0,0,0,101,71.69V13A12,12,0,0,0,89,1H28.05A12,12,0,0,0,19,5.13l-15,17.31A12,12,0,0,0,1,30.31V89a12,12,0,0,0,12,12H74A12,12,0,0,0,83,96.87Z' fill='none' stroke='%23fefb66' stroke-width='2'/%3E%3C/svg%3E") 32;
}

button::after {
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Cpath d='M83,96.87l15-17.31A12,12,0,0,0,101,71.69V13A12,12,0,0,0,89,1H28.05A12,12,0,0,0,19,5.13l-15,17.31A12,12,0,0,0,1,30.31V89a12,12,0,0,0,12,12H74A12,12,0,0,0,83,96.87Z' fill='%23fefb66' stroke='%23fefb66' stroke-width='2'/%3E%3C/svg%3E") 32 fill;
  opacity: 0;
  transition: opacity 250ms;
}
.fig {
  position: absolute;
  width: 200px;
  height: 200px;
}

.fig::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #fff;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(-25%, 0) rotate(45deg);
  transition: transform 500ms;
}

.clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 -100% 0 0 round 50%);
}

.back {
  position: absolute;
  inset: 0;
  transform: rotate(-45deg);
}

.fig:hover .img {
  transform: translate(5%, 0) rotate(45deg);
}

  </style>
</head>
<body>

<figure class="fig">
  <div class="back">
    <div class="clip">
      <img class="img" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/320/facebook/327/rocket_1f680.png" alt="">
    </div>
  </div>
</figure>


<div id="container">
<!-- Тут будут картинки  -->
  
<!--
   <img src="img1.jpg" id="img1">
   <img src="img2.jpg" id="img2">
   <img src="img3.jpg" id="img3"> -->
  
           <br>
   <button onclick="btn()">Дальше >>></button>
</div>

<!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- JQuery -->
  
  <!-- 70 процентов заготовок RAX7
     https://qna.habr.com/user/RAX7-->
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.