아임웹 코드 - 시선을 사로잡는 동영상 버튼 애니메이션

시연 동영상 보기

※ 동영상 url의 경우 유튜브/비메오 태그는 사용 불가합니다

<div class="fourthsections">

<div class="wrapper">

  <input type="checkbox">

  <div class="video">

    <video src="https://videocdn.cdnpk.net/joy/content/video/free/video0485/large_preview/_import_61c0438385c6c1.31923113.mp4" loop muted autoplay playsinline></video>

  </div>

  <div class="text">

    <span data-text="Imweb Video Animation"></span>

  </div>

</div>

</div>

<style>

  .wrapper {

  --color: #FFFFFF;

  --color-invert: #1F242D;

  --clip-path: circle(20px at left);

  --clip-path-hover: circle(176px at left);

  --clip-path-clicked: circle(100vw at left);

  --duration: .4s;

  --timing-function: ease;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

}

.wrapper .video {

  height: 100vh;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-left: 15px;

  clip-path: var(--clip-path);

  transition: clip-path var(--duration) var(--timing-function);

}

.wrapper .video video {

  position: fixed;

  background: #c4cbde;

  top: 50%;

  left: 50%;

  min-width: 100%;

  min-height: 100%;

  width: auto;

  height: auto;

  transform: translate(-50%, -50%);

}

.wrapper .text {

  position: relative;

  text-transform: uppercase;

  font-weight: 600;

  font-size:32px;

  letter-spacing: 0.2px;

  opacity: var(--opacity, 1);

  transition: opacity 0.3s var(--timing-function) 0.2s;

}

.wrapper .text::before, .wrapper .text::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: -1px;

  right: 25px;

  height: 0;

}

.wrapper .text::before {

  box-shadow: 26px 0 0 1px var(--color);

  right: var(--r, 100%);

  opacity: var(--opacity, 0);

  transition: right 0.5s ease-in, opacity 0.1s linear;

}

.wrapper .text::after {

  box-shadow: 26px 0 0 1px var(--color-invert);

  clip-path: var(--clip-path);

  transition: clip-path var(--duration) var(--timing-function);

}

.wrapper .text > span::before, .wrapper .text > span::after {

  content: attr(data-text);

  padding-left: 26px;

}

.wrapper .text > span::before {

  color: var(--color);

}

.wrapper .text > span::after {

  color: var(--color-invert);

  clip-path: var(--clip-path);

  transition: clip-path var(--duration) var(--timing-function);

  position: absolute;

  left: 0;

}

.wrapper input {

  width: 220px;

  height: 40px;

  margin: auto;

  position: absolute;

  left: 0;

  right: 0;

  border-radius: 40px;

  outline: none;

  z-index: 2;

  appearance: none;

  cursor: pointer;

}

.wrapper input:focus {

  outline: 0;

}

.wrapper input:hover ~ .video {

  clip-path: var(--clip-path-hover);

}

.wrapper input:hover ~ .text::before {

  --r: 25px;

  --opacity: 1;

}

.wrapper input:hover ~ .text::after {

  clip-path: var(--clip-path-hover);

}

.wrapper input:hover ~ .text > span::after {

  clip-path: var(--clip-path-hover);

}

.wrapper input:checked {

  width: 100%;

  height: 100%;

  border-radius: 0;

}

.wrapper input:checked ~ .video {

  clip-path: var(--clip-path-clicked);

}

.wrapper input:checked ~ .text {

  --opacity: 0;

  transition: opacity 0.3s var(--timing-function);

}

.wrapper input:checked ~ .text::after {

  clip-path: var(--clip-path-clicked);

}

.wrapper input:checked ~ .text > span::after {

  clip-path: var(--clip-path-clicked);

}

.fourthsections {

  background: #1b1b1b;

  height: 100vh;

  font: 400 16px "Poppins", sans-serif;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

</style>