Delete Button Confirmation

In this example below you will see how to do a Delete Button Confirmation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by phildebrandt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright phildebrandt ©
  • HTML
  • CSS
  • JavaScript
    .content
  .btn-container
    %a.btn-delete{:href => "#"}
      Delete

/*Downloaded from https://www.codeseek.co/phildebrandt/delete-button-confirmation-EWKryE */
    * {
  box-sizing: border-box;
}

html {
  height: 100vh;
}
body {
  // background: #111;    
  display: flex;
  height: 100vh;
  justify-content: center;
  line-height: 1.5;
}

.content {
  align-self: center;
}

.btn-container {
  position: relative;
}

.btn-delete {
  color: #fff;
  background: #791515;
  display: inline-block;
  text-decoration: none;
  padding: 5px 15px;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: all 100ms ease-in;
  
  &.is-confirming {
    opacity: 0.5;
  }
}

.confirm {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  background: #fff;
  display: inline-block;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 10px;
  animation: animate_confirm 150ms forwards ease-out;
  border: 1px solid #000;
  
  &:before {
    position: absolute;
    z-index: 2;
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #fff;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  &:after {
    position: absolute;
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border: ((1px * 1.4142135623731) + 5px) solid transparent;
    border-top-color: #000;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  &__link {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    color: #444;
    background: #ccc;
    padding: 0 10px;
    margin-left: 5px;
    
    &:hover {
      background: #bbb;
    }
    
  }
}

@keyframes animate_confirm {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 20%, 0) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}



/*Downloaded from https://www.codeseek.co/phildebrandt/delete-button-confirmation-EWKryE */
    $(function(){
  $('.btn-delete').on('click', function(e){
    e.preventDefault();
    var confirmHTML = '<div class="confirm"><span class="confirm__content">Are you sure?</span> <a href="#" class="confirm__link confirm__link--yes">Yes</a> <a href="#" class="confirm__link confirm__link--no">No</a></div>';
    $(this).toggleClass('is-confirming');
    if($('.btn-container').children('.confirm').length) {
      $('.confirm').remove(); 
    } else {
      $(this).before(confirmHTML);
      $('.confirm__link--yes').focus();
    }
  });
});

Comments