<!-- Bubble element with z=1 shadow -->
  <div href="#" class="papersheet">
    
    <!-- Papersheet content wrapper -->
    <div class="papersheet-content">
      
      <h2>Lorem ipsum dolor sit amet.</h2>
    
      Lorem ipsum dolor sit amet , consectetur adipisicing elit. Aut eveniet molestias neque, ea, dolorum facilis pariatur excepturi iusto, commodi, amet magni. Pariatur possimus odit quae aperiam, molestias placeat nam est.
   
    </div>
    
    <!-- Controls Bar -->
    <div class="papersheet-controls">
        <button class="papersheet-controls__button -primary">OK</button>
        <button class="papersheet-controls__button">ANNULLA</button>
    </div>
    
  </div>
// import custom web font
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);


body {
height: 100vh;
font-family: 'Roboto', sans-serif;;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFF;
transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
  
    // container with .clicked class
    &.clicked {
    background-color: #512DA8; }
}

// title reset
h2 {
color: #474747;
font-weight: 300;
margin-top: 0; }


// bubble element style
.papersheet {
position: relative;
display: block;
text-decoration: none;
box-sizing: border-box;
line-height: 1.7;
color: #8A9199;
display: block;
height: auto;
max-width: 40%;
overflow: auto;
user-select: none;
cursor: pointer;
border-radius: 2px;
font-weight: 400;
transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
background-color: #FFF;
.z-1;


  // hover status
  &:hover {
  // Z depth 2
  .z-3; }

  // style when clicked
  &.clicked {
  transform: scale(1.3,1.3);
  padding-bottom: 3rem;
  // Z depth 4
  .z-5; }

}


// papersheet content wrapper style
.papersheet-content {
padding: 2rem; }


// papersheet controls bar
.papersheet-controls {
background-color: red;
opacity: 0;
//pointer-events: none;
transition: opacity 200ms;
position: absolute;
left: 0;
right: 0;
bottom: 1rem;
padding: 0 2rem;
text-align: center;
background-color: #FFF;
  
  // show when inside .clicked paper-sheet
  .clicked & {
  pointer-events: auto;
  opacity: 1; }
}


// papersheet controls button element
.papersheet-controls__button {
background-color: #FFF;
padding: 0.5rem 1rem;
outline: none;
transition: all 200ms;
color: #263238;
border: none;
  
  // hover status
  &:hover {
  background-color: #ECEFF1; }
  
  // call button styles mixin container 
  .button-modifier;
  
}


// modifier mixin container for buttons styles
.button-modifier() {
  
  // primary button style
  &.-primary {
  color: #00BCD4; }
  
}


  // MIXINS
  //########################################

  // z-depth official shadows
  // (https://www.polymer-project.org/components/paper-elements/demo.html#paper-shadow)
  
  .z-1() { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
  .z-2() { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2); }
  .z-3() { box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 11px 7px 0 rgba(0, 0, 0, 0.19); }
  .z-4() { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.3), 0 14px 12px 0 rgba(0, 0, 0, 0.17); }
  .z-5() { box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15); }
View Compiled
var _el= $(".papersheet");

_el.click(function(){

  if (_el.hasClass("clicked")) {
  	$(this).removeClass("clicked");
  	$(this).parent("body").removeClass("clicked");
  } else {
  	$(this).addClass("clicked");
  	$(this).parent("body").addClass("clicked");
  }

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js