Upload cloud btn

by Andrey Izman

HTML

<div id="drop-area-root" class="UploadDropArea__root"><input type="file" multiple="" class="UploadDropArea__input">
  <div id="drop-area" class="UploadDropArea__area ">
    <div class="UploadDropArea__circle">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="50" fill="currentColor"></circle>
      </svg>
    </div>
    <div class="UploadDropArea__icon">
      <svg width="21" height="21" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M7 12.384l-.384.383a.999.999 0 11-1.414-1.414l2.06-2.06A.999.999 0 018 9a.999.999 0 01.738.293l2.06 2.06a1 1 0 01-1.414 1.414L9 12.384V15a1 1 0 01-2 0v-2.616zm-3.698.618l-.058.001A3.246 3.246 0 010 9.758c0-1.31.779-2.44 1.898-2.952a3.289 3.289 0 013.535-4.548 4.142 4.142 0 017.798 2.385A4.328 4.328 0 0116 8.679a4.328 4.328 0 01-3.273 4.195 2.607 2.607 0 00-.645-2.624L9.844 8.012a2.588 2.588 0 00-1.829-.764h-.022a2.603 2.603 0 00-1.851.764L3.904 10.25a2.611 2.611 0 00-.602 2.752z"></path>
      </svg>
      <div class="UploadDropArea__text">Перенесите файлы в&nbsp;эту зону для быстрой загрузки в&nbsp;Облако</div>
    </div>
    <div class="UploadDropArea__pulse">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="50" fill="currentColor"></circle>
      </svg>
    </div>
  </div>
</div>

CSS

body {
  font-family: Arial, Tahoma, Verdana, sans-serif;
}

@keyframes drop-area-pulse {
  from {
    transform: scale(3.3);
  }

  50% {
    transform: scale(4);
  }

  to {
    transform: scale(3.3);
  }
}

@keyframes grow {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(3);
  }
}

@keyframes grown {
  from {
    transform: scale(1);
  }

  10% {
    transform: scale(3.3);
  }

  to {
    transform: scale(3.5);
  }
}

.UploadDropArea__root {
  position: fixed;
  bottom: 70px;
  left: 0;
  right: 95px;
  z-index: 999;
}

.UploadDropArea__input {
  display: none;
}

.UploadDropArea__area {
  width: 74px;
  height: 74px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  top: 0;
  cursor: pointer;
  transform: translateY(-50%) translateX(-50%);
  left: 100%;
  position: absolute;
}

.UploadDropArea__area:before,
.UploadDropArea__circle {
  position: absolute;
  top: 0;
  left: 0;
}

.UploadDropArea__area:before {
  content: "";
  right: 0;
  bottom: 0;
  border-radius: 50%;
  box-shadow: 0 20px 40px 0 rgba(0, 58, 152, .28);
}

.UploadDropArea__area:before,
.UploadDropArea__circle {
  position: absolute;
  top: 0;
  left: 0;
}

.UploadDropArea__circle {
  transform: scale(1);
  transition: transform .25s cubic-bezier(.42, 0, 0, 1);
  width: 74px;
  height: 74px;
  color: #005ff9;
}

.UploadDropArea__area_open .UploadDropArea__icon {
  transform: translateY(-23px);
}

.UploadDropArea__area_open .UploadDropArea__circle {
  transform: scale(3.3);
}

.UploadDropArea__icon {
  position: relative;
  transform: translateY(27px);
  transition: transform .25s cubic-bezier(.42, 0, 0, 1);
  will-change: trasnform;
  pointer-events: none;
  z-index: 2;
}

.UploadDropArea__icon,
.UploadDropArea__text {
  text-align: center;
}

.UploadDropArea__icon svg {
  fill: #fff;
}

.UploadDropArea__text {
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  width: 172px;
  opacity: 0;
  margin-top:...

JavaScript

$("#drop-area-root").on("mouseover", function() {
  $("#drop-area").addClass("UploadDropArea__area_open")
});
$("#drop-area-root").on("mouseout", function() {
  $("#drop-area").removeClass("UploadDropArea__area_open")
});