프루티거 에어로

<div class="scene">
  <span class="bubble b1"></span><span class="bubble b2"></span><span class="bubble b3"></span>
  <button class="orb">
    <span class="gloss"></span>
    ▶
  </button>
</div>

body{background:linear-gradient(180deg,#8fd0ff 0%,#dff3ff 55%,#e9f9df 100%)}
.scene{position:relative;width:100%;height:100%;overflow:hidden}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.15) 60%,rgba(255,255,255,.05));
  animation:rise 5s ease-in infinite}
.b1{width:24px;height:24px;left:16%;bottom:-10%;animation-delay:0s}
.b2{width:14px;height:14px;left:70%;bottom:-10%;animation-delay:1.4s}
.b3{width:18px;height:18px;left:46%;bottom:-10%;animation-delay:2.6s}
@keyframes rise{
  0%{transform:translateY(0);opacity:0}
  15%{opacity:1}
  100%{transform:translateY(-140px);opacity:0}
}
.orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
  border:0;cursor:pointer;color:#0d5a7a;font-size:18px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 35% 25%,#eaffff,#8fe0f0 55%,#4fb8d8 100%);
  box-shadow:0 10px 18px rgba(20,100,140,.35),inset 0 -4px 8px rgba(0,60,90,.25)}
.gloss{position:absolute;top:8%;left:16%;width:60%;height:38%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  transform:rotate(-12deg)}