{"id":74,"date":"2024-10-19T17:51:50","date_gmt":"2024-10-19T17:51:50","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=74"},"modified":"2025-04-05T10:49:57","modified_gmt":"2025-04-05T10:49:57","slug":"animate-alert-box-with-html-and-css","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/","title":{"rendered":"How to Create an Animate Alert Box with HTML and CSS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"74\" class=\"elementor elementor-74\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef5062f e-flex e-con-boxed e-con e-parent\" data-id=\"ef5062f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f9a41d elementor-widget elementor-widget-text-editor\" data-id=\"7f9a41d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hello, my friends today I am going to create a <a href=\"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/\"><strong>Custom Animated Alert Box<\/strong><\/a> and Pop-up modal using HTML and CSS. In the previous blog, I have shared a blog with you about How to Create an Animated Profile Card and this time we are going to create an alert box.<\/p><p>In simple terms, an alert box is a message box that pops up on your computer screen to solicit your opinion about an action you are taking.<br \/>When an alert box pops up there are some messages and some buttons, then the user has to select the one he\/she wants. There are many forms of popup boxes, one of them is alert box.<\/p><p>As you can see on the given image of alert box. It consists of a flat window with some text and two buttons.The text is used as a warning about the action and a two-box is used to ask the user&#8217;s opinion about the action. Users can cancel the action by clicking the \u201cCancel\u201d button and continue the action by clicking the \u201cYes\u201d button. Actually in the ID first there is a button with the text &#8220;Click Me&#8221; and the alert box is hidden, when you click on this &#8220;Click Me&#8221; button the alert box appears and the &#8220;Click Me&#8221; button disappears .<\/p><p>If you are finding it difficult to understand what I am talking about this program [animated alert box or <a href=\"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/\"><strong>custom popup box<\/strong><\/a>] then don&#8217;t worry I have created a complete video tutorial about this program which is given below. Has gone. I am sure all your confusion will be cleared after watching the complete video about this program [Custom Alert Box].<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5013a9f elementor-widget elementor-widget-heading\" data-id=\"5013a9f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Custom Alert Box Code<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47c3e45 elementor-widget elementor-widget-text-editor\" data-id=\"47c3e45\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To paste the given codes of this program , first, you need to create two files who one is an HTML file and second is a CSS file. After creating to these two files you can paste the given codes into your files. You can also download all source codes from the given website directly. It\u2019s all your choice what you want to do.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a25cc8b elementor-widget elementor-widget-code-highlight\" data-id=\"a25cc8b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n  <head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Alert Box | CodingLab <\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.2\/css\/all.min.css\"\/>\r\n   <\/head>\r\n<body>\r\n    <div class=\"container\">\r\n      <input type=\"checkbox\" id=\"check\">\r\n      <label class=\"show_button\" for=\"check\">Click Me<\/label>\r\n      <div class=\"background\"><\/div>\r\n      <div class=\"alert_box\">\r\n        <div class=\"icon\">\r\n          <i class=\"fas fa-exclamation\"><\/i>\r\n        <\/div>\r\n        <header>Confirm<\/header>\r\n        <p>Are you sure want to permanently delete this Photo?<\/p>\r\n        <div class=\"btns\">\r\n          <label for=\"check\">Yes, Delete!<\/label>\r\n          <label for=\"check\">Cancel<\/label>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<!-- Created By CodingTutorial - https:\/\/www.codingtutorials.in --><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-717fda6 elementor-widget elementor-widget-code-highlight\" data-id=\"717fda6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');\r\n*{\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  font-family: 'Poppins',sans-serif;\r\n}\r\n.alert_box,\r\n.show_button{\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50% , -50%);\r\n}\r\n.show_button{\r\n  height: 55px;\r\n  padding: 0 30px;\r\n  font-size: 20px;\r\n  font-weight: 400;\r\n  cursor: pointer;\r\n  outline: none;\r\n  border: none;\r\n  color: #fff;\r\n  line-height: 55px;\r\n  background: #2980b9;\r\n  border-radius: 5px;\r\n  transition: all 0.3s ease;\r\n}\r\n.show_button:hover{\r\n  background: #2573a7;\r\n}\r\n.background{\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  top: 0;\r\n  left: 0;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: all 0.3s ease;\r\n}\r\n.alert_box{\r\n  padding: 30px;\r\n  display: flex;\r\n  background: #fff;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  max-width: 450px;\r\n  width: 100%;\r\n  border-radius: 5px;\r\n  z-index: 5;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transform: translate(-50% , -50%) scale(0.97);\r\n  transition: all 0.3s ease;\r\n}\r\n#check:checked ~ .alert_box{\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  transform: translate(-50% , -50%) scale(1);\r\n}\r\n#check:checked ~ .background{\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n#check{\r\n  display: none;\r\n}\r\n.alert_box .icon{\r\n  height: 100px;\r\n  width: 100px;\r\n  color: #f23b26;\r\n  border: 3px solid #f23b26;\r\n  border-radius: 50%;\r\n  line-height: 97px;\r\n  font-size: 50px;\r\n}\r\n.alert_box header{\r\n  font-size: 35px;\r\n  font-weight: 500;\r\n  margin: 10px 0;\r\n}\r\n.alert_box p{\r\n  font-size: 20px;\r\n}\r\n.alert_box .btns{\r\n  margin-top: 20px;\r\n}\r\n.btns label{\r\n  display: inline-flex;\r\n  height: 55px;\r\n  padding: 0 30px;\r\n  font-size: 20px;\r\n  font-weight: 400;\r\n  cursor: pointer;\r\n  line-height: 55px;\r\n  outline: none;\r\n  margin: 0 10px;\r\n  border: none;\r\n  color: #fff;\r\n  border-radius: 5px;\r\n  transition: all 0.3s ease;\r\n}\r\n.btns label:first-child{\r\n  background: #2980b9;\r\n}\r\n.btns label:first-child:hover{\r\n  background: #2573a7;\r\n}\r\n.btns label:last-child{\r\n  background: #f23b26;\r\n}\r\n.btns label:last-child:hover{\r\n  background: #d9210d;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hello, my friends today I am going to create a Custom Animated Alert Box and Pop-up modal using<\/p>\n","protected":false},"author":1,"featured_media":75,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[12,13,14,15],"class_list":["post-74","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss","tag-alert-box-design","tag-alert-box-in-html","tag-design-alert-box","tag-html-alert-box"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create an Animate Alert Box with HTML and CSS<\/title>\n<meta name=\"description\" content=\"Hello, my friends today I am going to create a Custom Animated Alert Box and Pop-up modal using HTML and CSS. In the previous blog, I have shared a blog\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create an Animate Alert Box with HTML and CSS\" \/>\n<meta property=\"og:description\" content=\"Hello, my friends today I am going to create a Custom Animated Alert Box and Pop-up modal using HTML and CSS. In the previous blog, I have shared a blog\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-19T17:51:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:49:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Animated-Alert-Box-using-HTML-CSS-only-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create an Animate Alert Box with HTML and CSS","description":"Hello, my friends today I am going to create a Custom Animated Alert Box and Pop-up modal using HTML and CSS. In the previous blog, I have shared a blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Create an Animate Alert Box with HTML and CSS","og_description":"Hello, my friends today I am going to create a Custom Animated Alert Box and Pop-up modal using HTML and CSS. In the previous blog, I have shared a blog","og_url":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-10-19T17:51:50+00:00","article_modified_time":"2025-04-05T10:49:57+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Animated-Alert-Box-using-HTML-CSS-only-1.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"How to Create an Animate Alert Box with HTML and CSS","datePublished":"2024-10-19T17:51:50+00:00","dateModified":"2025-04-05T10:49:57+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/"},"wordCount":360,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Animated-Alert-Box-using-HTML-CSS-only-1.webp","keywords":["Alert Box Design","Alert Box in HTML","Design Alert Box","HTML Alert Box"],"articleSection":["HTML&amp;CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/","url":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/","name":"How to Create an Animate Alert Box with HTML and CSS","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Animated-Alert-Box-using-HTML-CSS-only-1.webp","datePublished":"2024-10-19T17:51:50+00:00","dateModified":"2025-04-05T10:49:57+00:00","description":"Hello, my friends today I am going to create a Custom Animated Alert Box and Pop-up modal using HTML and CSS. In the previous blog, I have shared a blog","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Animated-Alert-Box-using-HTML-CSS-only-1.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Animated-Alert-Box-using-HTML-CSS-only-1.webp","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/animate-alert-box-with-html-and-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"How to Create an Animate Alert Box with HTML and CSS"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":9,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":2711,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/74\/revisions\/2711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/75"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}