<div class="container">
  <label for="delete">
    <div class="wrapper">
      <div class="lid"></div>
      <div class="can"></div>
      <span>delete</span>
    </div>
  </label>
  <input type="checkbox" name="" id="delete">
  <div class="dialog">
    <h4>are you sure?</h4>
    <ul>
      <li><label for="delete">Yes</label></li>
      <li><label for="delete">No</label></li>
    </ul>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

*{
  box-sizing: border-box;
}
*:before,
*:after{
  box-sizing: border-box;
}
html,body{
  min-height: 100%;
  user-select: none;
  font-family: 'Open Sans Condensed';
}
body{
  background-image: radial-gradient(mintcream 0%, lightgrey 100%);
}
.container{
  position: relative;
  display: table;
  margin: 12% auto;
}
.wrapper{
  position: relative;
  cursor: pointer;
}
.lid{
  position: relative;
  top: 2px;
  width: 24px;
  height: 6px;
  background: white;
  border: solid 2px rgb(100,100,100);
  transition: all .2s ease-in-out;
  transform-origin: left;
  transform: rotate(0deg) translateY(0px);
}
.lid:before,
.lid:after{
  content: '';
  position: absolute;
}
.lid:before{
  width: 10px;
  height: 5px;
  top: -5px;
  left: 5px;
  background: rgb(100,100,100);
}
.lid:after{
  width: 6px;
  height: 4px;
  top: -3px;
  left: 7px;
  background: white;
}
.can{
  position: relative;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border: solid 2px rgb(100,100,100);
  border-radius: 0 0 3px 3px;
}
.can:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  box-shadow: 4px 5px 0px 1px rgb(100,100,100),
    4px 7px 0px 1px rgb(100,100,100),
    4px 9px 0px 1px rgb(100,100,100),
    4px 11px 0px 1px rgb(100,100,100),
    4px 13px 0px 1px rgb(100,100,100),
    8px 5px 0px 1px rgb(100,100,100),
    8px 7px 0px 1px rgb(100,100,100),
    8px 9px 0px 1px rgb(100,100,100),
    8px 11px 0px 1px rgb(100,100,100),
    8px 13px 0px 1px rgb(100,100,100),
    12px 5px 0px 1px rgb(100,100,100),
    12px 7px 0px 1px rgb(100,100,100),
    12px 9px 0px 1px rgb(100,100,100),
    12px 11px 0px 1px rgb(100,100,100),
    12px 13px 0px 1px rgb(100,100,100);
}
span{
  position: absolute;
  background: rgb(100,100,100);
  color: white;
  font: normal 10px/15px Arial;
  padding: 2px 4px;
  border-radius: 2px;
  left: -6px;
  bottom: 0px;
  opacity: 0;
  z-index: -1;
  transition: all .4s ease .4s;
}
input{
  display: none;
}
.wrapper:hover .lid{
  transform: rotate(-30deg) translateY(-2px);
}
.wrapper:hover span{
  bottom: -22px;
  opacity: 1;
}
.dialog{
  width: 200px;
  height: auto;
  padding-bottom: 20px;
  background: rgb(250,250,250);
  border: solid 1px rgb(100,100,100);
  border-radius: 3px;
  position: absolute;
  text-align: center;
  left: -85px;
  top: -350px;
  opacity: 0;
  box-shadow: 0 0 5px 2px rgb(150,150,150);
  transition: all .5s ease-in-out;
}
h4{
  color: rgb(100,100,100);
  font: bold 15px/40px 'Open Sans Condensed', sans-serif;
  text-transform: none;
}
ul{list-style: none;}
li{
  display: inline-block;
  border-radius: 2px;
  width: 50px;
}
li > label{
  display: block;
  padding: 2px 4px;
  color: white;
  font: normal 12px Arial;
  cursor: pointer;
}
li:nth-child(1){
  background-image: linear-gradient(rgb(0,150,0) 0%,rgb(0,100,0) 100%);
  box-shadow: 0 2px 0px rgb(0,50,0);
}
li:nth-child(1):hover{
  background: rgb(0,150,0);
}
li:nth-child(1):active{
  box-shadow: inset 0 2px 0px rgb(0,50,0);
}
li:nth-child(2){
  background-image: linear-gradient(rgb(150,0,0) 0%,rgb(100,0,0) 100%);
  box-shadow: 0 2px 0px rgb(50,0,0);
}
li:nth-child(2):hover{
  background: rgb(150,0,0);
}
li:nth-child(2):active{
  box-shadow: inset 0 2px 0px rgb(50,0,0);
}
input[type='checkbox']:checked + .dialog{
  opacity: 1;
  top: -20px;
}
/*
still playing with input:checkbox modal dialog box implementation. The Trash Can it self inspired by Google Chrome Extension Manager. 

full view: https://codepen.io/ImBobby/full/lJfCB

Inspired by: Google Chrome extension trash can.
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.