Beautiful Animated Button With confirmation For Websites

Hello fellas, once again i'm back here with an amazing webmaster tip for you all. This time we'll discuss about Animation. Yes you're hearing right! Finally i have my first tutorial on Animation Effect. Today you will learn how to create an animated delete button with confirmation on your webpage. This is a very responsive creation and also it looks pretty amazing on websites. So what are you waiting for? Lets do this out 😋

1. How To Create This Delete Button
2. Tips For Newbee's
3. Final Words

How To Create This Delete Button

To create this beautiful animated delete button with confirmation along with delete and check icons you have to follow the instructions to build this button using several web design codes. i.e HTML,JavaScript,JavaQuery which are given in the codepen window below. All you have to do is to copy these codes in their order and put them on your website.

Tips For Newbee's

If you don't know anything about Web Designing (i.e HTML,JavaScript, JavaQuery, Ajax,Bootstrap,CSS) or you are learning then follow the guides given by me to add this Delete Button on your webpage/website
Also Read: Download Ultimate Courses For Learning Web Designing

• Step 1: Login to your web hosting (i.e Blogger/Joomla/Wordpress/Drupal). Now in this case i'm using my Wordpress hosting.

• Step 2: Now Your Wordpress Dashboard will come. Just click on Appearence & then click Editor.

• Step 3: Now your wepsite files will be shown in list along with code editor. See screenshot below:

• Step 4: Now open your style.css and add the Following css code on the end of file.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115// Setting up

$bg: #313841; $red: #F34541; $black: #1D242B; $green: #38B87C; $blue: #2492FF; body { background: $bg; color: #fff; font-family: "Roboto", sans-serif; font-size: 13px; } .centerMe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

// Dribbble

button {
 display: flex;
 cursor: pointer;
 border: 0;
 background: transparent;
 outline: 0;
 overflow: hidden;
 .icon {
  position: relative;
  background: $black;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  transition: .2s color;
  border-radius: 2px;
  .fa {
   width: 30px;
   transition: .2s all;
  }
  .fa-check { color: $green; }
  .fa-question { color: $blue; }
  &:after {
   content: ' ';
   display: block;
   position: absolute;
   width: 5px;
   height: 5px;
   transform: rotate(45deg);
   background: $black;
   top: 12.5px;
   right: 1px;
   transition: .2s right;
   z-index: 1;
  }
 }
 .text {
  position: relative;
  width: 0;
  height: 30px;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
  background: $red;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-weight: 300;
  transition: .2s all;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  span {
   width: 100%;
   opacity: 0;
   position: absolute;
   top: -30px;
   left: 50%;
   transform: translateX(-50%);
   transition: .3s all;
  }
 }
 &:hover {
  .icon {
   color: $red;
   border-radius: 0;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
   &:after { right: -2px; }
  }
  .text {
   width: 120px;
   span { opacity: 1; top: 0; }
  }
 }
 &.confirm {
  .icon {
   border-radius: 0;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
   .fa { transform: translateY(-30px); }
   &:after { right: -2px }
  }
  .text {
   background: $blue;
   width: 120px;
   span { opacity: 1; top: 0; }
  }
 }
 &.done {
  .icon {
   border-radius: 0;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
   .fa { transform: translateY(-60px); }
   &:after { right: -2px }
  }
  .text {
   background: $green;
   width: 120px;
   span { opacity: 1; top: 0; }
  }
 }
}

@keyframes fadeInZoom {
 0% { opacity: 0; transform: scale(.7); }
 100% { opacity: 1; transform: scale(1); }
}

• Step 5: Now open your. footer.php and add these codes at the end of file.

12345678910111213141516171819202122232425<script type="text/javascript">
// Design / Dribbble by:
// Adam Whitcroft
// URL: https://dribbble.com/shots/969445-The-Double-Delete

$("button").click(function(){
 if($(this).hasClass("confirm")){
  $(this).addClass("done");
  $("span").text("Deleted");
 } else {
  $(this).addClass("confirm");
  $("span").text("Are you sure?");
 }
});

// Reset
$("button").on('mouseout', function(){
 if($(this).hasClass("confirm") || $(this).hasClass("done")){
  setTimeout(function(){
   $("button").removeClass("confirm").removeClass("done");
   $("span").text("Delete");
  }, 3000);
 }
});
</script>

• Step 6: Now whenever or wherever you want to add this Animated Delete Button, just place the below code and see the result

12345678%button.centerMe
 .icon
  %i.fa.fa-trash-o
  %i.fa.fa-question
  %i.fa.fa-check
 .text
  %span Delete

Now you have successfully added Animated Delete Button with Confirmation on your website. 😊

Final Words

This was the article on Animated Delete Button with Confirmation. I hope you'll like this article. If you need any extra help completing this guide, then you should tell me in comments.
Also Read: Pure CSS Colourful Progress Bar Line for Blogs&Forums

Thankyou for visiting Droidadda. For fast access to our service Bookmark & Subscribe us now. Share this article with your friends and show how they can customize their Webpage. If any issues then feel free to comment below. Peace out.