Glassmorphism

by jpeter06

HTML

<div class="container">
  <div id="p" class="p20"> </div>
  <div id="p" class="p12"> </div>
  <div id="p" class="p8"> </div>
  <div class="footer">
    <div class="bt btmain">
      <span class="bttext">Button1</span>
    </div>
    <div class="bt btsecond">
      <span class="bttext">Button2</span>
    </div>
    <div class="bt">
      <span class="bttext">Button3</span>
    </div>
  </div>
</div>
<div class="verticalT">
VerticalText
</div>
<div class="tooltip">
  <div class="title">
    Titulo
  </div>
  <div class="bt">
    <span class="bttext">Button</span>
  </div>
</div>

CSS

body,html{padding:0px; margin:0px; width:100% ; height:100%;
  overflow:hidden;
  
  /*background: linear-gradient(120deg,#FFFF00 6%,#FFA500 25%,#F14444 45%,#D53567 55%,#9A109A 94%);*/
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQI12OWTl8w44sUg898s5tnOAAmhQWa6+8+ewAAAABJRU5ErkJggg==');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  
  display: flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center;
}

.verticalT{
  position:absolute;
  font-size:19vh;
   transform: rotate(90deg);
}

.container{
  z-index:2;
  border-radius: 12px;
  background: rgba(255,255,255,0.3);
  width:80vw;
  padding:12px;
  display:flex;
  flex-direction: column;
  backdrop-filter: blur(5px);
}

.p20, .p12, .p12, .p8, .bt{
  background: rgba(255,255,255,0.3);
  border-radius:10px;
  margin: 8px;
  backdrop-filter: blur(5px);
}

.p20{  height:20vh;}
.p12{  height:12vh;}
.p8{  height:8vh;}

.footer{  
  display:flex;
  flex-direction:row;
}

.bt{ 
  height:10vh; 
  width: 20vw; 
  margin-left:10px;
  justify-content: flex-end;
  display: flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
}

.bt:hover{
  background: rgba(255,255,255,0.7);
}

.btmain{
  background: rgba(200,200,255,0.7);
}
.btsecond{
  background: rgba(255,255,255,0.7);
}
/** TOOLTIP **/
.tooltip{
  position:absolute;
  right:20px;
  top:20px;
  z-index:3;
  border-radius: 12px;
  
  background: rgba(255,255,255,0.3);
  padding:12px;
  display:flex;
  flex-direction: column;
  backdrop-filter: blur(5px);
  font-family:sans-serif;
  font-weight: bold;
  color:rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:1px 1px 20px  #a9a;
}

.bttext{
  color:#777;
  font-size: 3.2vw;
}