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 😋

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,CSS,JavaScript 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.

See the Pen Delete Button Animation(Droidadda) by Sunmughan Swamy (@sunmughan) on CodePen.

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
  • 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.
// 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.

// 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);
 }
});
  • Step 6: Now whenever or wherever you want to add this Animated Delete Button, just place the below code and see the result
%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: Why Smartphones Overheat – A Complete Reference with Solution

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.

via Blogger http://www.droidadda.org/2017/07/animated-delete-button.html https://mtkdr0id.files.wordpress.com/2017/07/4fb89-delete-button-animation.gif?w=300

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s