Confirm appointment dialog
How do I make an confirm appointment dialog?
What is a confirm appointment dialog? How do you make a confirm appointment dialog? This script and codes were developed by Robert on 08 November 2022, Tuesday.
Confirm appointment dialog - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Confirm appointment dialog</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"> <div class="message">Do you want to confirm the appointment with <strong>Peter M.</strong>?</div> <div class="submit"> <span class="btn btn_red">No</span> <input type="submit" value="Yes" class="btn" /> </div>
</div>
</body>
</html>
Confirm appointment dialog - Script Codes CSS Codes
html { padding: 50px; font: 14px 'Helvetica', sans-serif; background: #3498DB;
}
.box { width: 300px; margin: auto; padding: 20px; background: #fff; border-radius: 3px;
}
.box .message { background-image: url('https://designmodo.github.io/Flat-UI/images/icons/[email protected]'); background-repeat: no-repeat; background-size: 75px 75px; min-height: 55px; padding-top: 20px; padding-left: 100px;
}
.box .submit { margin-top: 20px; padding-top: 20px; border-top: 2px solid #ECF0F1; text-align: justify;
}
.box .submit:before { content: ''; display: block; width: 100%; margin-bottom: -1em;
}
.box .submit:after { content: ''; display: inline-block; width: 100%;
}
.box .submit .btn { position: relative; top: 1em;
}
input.btn,
button.btn { font: inherit; border: none;
}
.btn { display: inline-block; padding: 10px 30px; border-radius: 3px; color: #fff; text-decoration: none; cursor: pointer; background: #21be21;
}
.btn:hover { box-shadow: 0 -4px #199319 inset;
}
.btn:active { box-shadow: none; padding-bottom: 6px; background: #1fb51f;
}
.btn:active { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px);
}
.btn i { display: inline-block; vertical-align: text-top; height: 1em; width: 1em; margin-top: 1px; margin-right: 0.5em; margin-left: -0.5em; font-style: normal; line-height: 1em;
}
.btn_gray { background: #aaa;
}
.btn_gray:hover { box-shadow: 0 -4px #919191 inset;
}
.btn_gray:active { box-shadow: none; padding-bottom: 6px; background: #a5a5a5;
}
.btn_red { background: #be2221;
}
.btn_red:hover { box-shadow: 0 -4px #931a19 inset;
}
.btn_red:active { box-shadow: none; padding-bottom: 6px; background: #b5201f;
}
.btn_blue { background: #3c6e8e;
}
.btn_blue:hover { box-shadow: 0 -4px #2d526a inset;
}
.btn_blue:active { box-shadow: none; padding-bottom: 6px; background: #396887;
}
.btn_orange { background: #E67E22;
}
.btn_orange:hover { box-shadow: 0 -4px #bf6516 inset;
}
.btn_orange:active { box-shadow: none; padding-bottom: 6px; background: #e4791a;
}
Developer | Robert |
Username | rendro |
Uploaded | November 08, 2022 |
Rating | 3 |
Size | 3,130 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Flexbox slider | 3,459 Kb |
CSS device icons | 2,360 Kb |
Float Label Pattern | 2,430 Kb |
CSS Map pin | 2,001 Kb |
A Pen by Robert | 3,362 Kb |
WebGL cube test | 15,142 Kb |
CSS3 Diamond | 1,960 Kb |
Greeting card | 2,208 Kb |
CSS3 Browser | 2,882 Kb |
Mobile navigation button | 2,659 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Cake | Kennyname | 7,220 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Weather App | OmranAbazid | 2,596 Kb |
Profile box | Daniesy | 2,766 Kb |
Basic template | Tomcat | 1,675 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!