Material CSS Contact Popup

Developer
Izzy Skye
Size
6,039 Kb
Views
10,120
  1. Material CSS Contact Popup Previews
  2. Material CSS Contact Popup HTML Codes
  3. Material CSS Contact Popup CSS Codes

How do I make an material css contact popup?

This is a css version of the google inbox mailing popup with my own spin on things (js only for material button feel). What is a material css contact popup? How do you make a material css contact popup? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Material CSS Contact Popup Previews
IQ Test

Material CSS Contact Popup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material CSS Contact Popup</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Raleway:300,400' rel='stylesheet subresource' type='text/css'> <link rel='stylesheet prefetch' href='https://cdn.zekken.rocks/css/waves.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" id="email-popup" onChange="this.blur()" />
<label for="email-popup" class="email animated waves-effect">	<span class="icons animated">	<svg class="email-icon animated" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="384px" viewBox="0 0 512 384" enable-background="new 0 0 512 384" xml:space="preserve">	<path d="M44.8,0h422.4C489.588,0,512,22.413,512,44.8v294.4c0,22.388-22.412,44.8-44.8,44.8H44.8C22.413,384,0,361.588,0,339.2V44.8 C0,22.413,22.413,0,44.8,0z M51.2,307.2c0,16.787,8.812,25.6,25.6,25.6h358.4c16.787,0,25.6-8.812,25.6-25.6V76.8L290,251.6 c-15.825,15.838-41.494,15.838-57.318,0L51.2,76.8V307.2z M89.6,51.2l150.244,150.25c11.875,11.875,31.119,11.875,42.994,0 L435.2,51.2H89.6z" />	</svg>	<svg class="pen-icon animated" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">	<g>	<path fill="#020202" d="M422.953,176.019c0.549-0.48,1.09-0.975,1.612-1.498l21.772-21.772c12.883-12.883,12.883-33.771,0-46.654 l-40.434-40.434c-12.883-12.883-33.771-12.883-46.653,0l-21.772,21.772c-0.523,0.523-1.018,1.064-1.498,1.613L422.953,176.019z" />	<polygon fill="#020202" points="114.317,397.684 157.317,440.684 106.658,448.342 56,456 63.658,405.341 71.316,354.683 " />	<polygon fill="#020202" points="349.143,125.535 118.982,355.694 106.541,343.253 336.701,113.094 324.26,100.653 81.659,343.253 168.747,430.341 411.348,187.74 " />	</g>	</svg>	</span>
</label>
<div class="mail animated">	<div class="top-bar">	<svg class="email-icon animated" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="384px" viewBox="0 0 512 384" enable-background="new 0 0 512 384" xml:space="preserve">	<path d="M44.8,0h422.4C489.588,0,512,22.413,512,44.8v294.4c0,22.388-22.412,44.8-44.8,44.8H44.8C22.413,384,0,361.588,0,339.2V44.8 C0,22.413,22.413,0,44.8,0z M51.2,307.2c0,16.787,8.812,25.6,25.6,25.6h358.4c16.787,0,25.6-8.812,25.6-25.6V76.8L290,251.6 c-15.825,15.838-41.494,15.838-57.318,0L51.2,76.8V307.2z M89.6,51.2l150.244,150.25c11.875,11.875,31.119,11.875,42.994,0 L435.2,51.2H89.6z"	/>	</svg>	<label for="email-popup" class="close-area animated"><span class="close"></span></label>	</div>	<input type="text" class="animated" placeholder="Your Subject" />	<input type="email" class="animated" placeholder="Your Email" />	<textarea name="message" id="message" cols="30" rows="8" class="animated" placeholder="Your Message"></textarea>	<button class="animated waves-effect" type="submit" onclick="this.blur()">	<span>Send</span>	</button>
</div> <script src='https://cdn.zekken.rocks/js/addons/waves.js'></script>
</body>
</html>

Material CSS Contact Popup - Script Codes CSS Codes

html { height: 100%;
}
body { background-color: silver; background-image: url(https://cdn.zekken.rocks/img/cubes.svg); color: #1D1F20; font-family: "Raleway", sans-serif; letter-spacing: 1px; margin: 0; min-height: 100%; overflow-x: hidden; width: 100%;
}
*, *:before, *:after { box-sizing: border-box;
}
.animated { -webkit-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;
}
#email-popup { position: fixed; bottom: 15px; right: -100%;
}
#email-popup:focus + .email { background: #0c8;
}
#email-popup:focus ~ .mail .close-area .close { background: rgba(255, 255, 255, 0.1);
}
#email-popup:focus ~ .mail .close-area:before { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0);
}
#email-popup:focus ~ .mail .close-area:after { opacity: 1; -webkit-transform: translateX(-4px); transform: translateX(-4px);
}
#email-popup:checked ~ .mail { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1;
}
#email-popup:checked + .email { background: #0c8;
}
#email-popup:checked + .email:hover:before { opacity: 0;
}
#email-popup:checked + .email .icons { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
#email-popup:checked + .email .email-icon { opacity: 0;
}
#email-popup:checked + .email .pen-icon { opacity: 1;
}
.email { position: fixed; bottom: 15px; right: 15px; width: 60px; height: 60px; background: #08c; border-radius: 100%; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.email .waves-ripple { border-radius: 100%;
}
.email:before { content: 'Contact'; position: absolute; top: 50%; right: calc(100% + 5px); -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); background: #1D1F20; color: #eee; padding: 5px 8px; border-radius: 0.3em; font-size: 14px; opacity: 0; max-width: 0; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.email .icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.email .email-icon,
.email .pen-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%;
}
.email .email-icon path { fill: #eee;
}
.email .pen-icon { opacity: 0; -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg);
}
.email .pen-icon path,
.email .pen-icon polygon { fill: #eee;
}
.email:hover { background: #0c8;
}
.email:hover:before { max-width: 75px; opacity: 1;
}
.email:hover .icons { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.email:hover .email-icon { opacity: 0;
}
.email:hover .pen-icon { opacity: 1;
}
.mail { position: fixed; bottom: 0; right: 90px; width: 276px; padding: 51px 15px 15px 15px; background: #eee; box-sizing: border-box; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 0.3em 0.3em 0 0;
}
.mail .top-bar { position: absolute; top: 0; left: 0; width: 100%; background: #1D1F20; height: 36px; border-radius: 0.3em 0.3em 0 0;
}
.mail .top-bar svg { height: 20px; width: 17px; position: absolute; top: 8px; left: 15px;
}
.mail .top-bar svg path { fill: #eee;
}
.mail .top-bar .close-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.mail .top-bar .close-area:before { content: 'Contact'; position: absolute; line-height: 36px; left: 39px; color: #eee; font-size: 14px; letter-spacing: 0.75px; -webkit-transform: translateX(4px); transform: translateX(4px); opacity: 1; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
}
.mail .top-bar .close-area:after { content: 'Close'; position: absolute; line-height: 36px; right: 29px; color: #eee; font-size: 14px; letter-spacing: 0.75px; opacity: 0; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
}
.mail .top-bar .close-area:focus, .mail .top-bar .close-area:hover { outline: none;
}
.mail .top-bar .close-area:focus .close, .mail .top-bar .close-area:hover .close { background: rgba(255, 255, 255, 0.1);
}
.mail .top-bar .close-area:focus:before, .mail .top-bar .close-area:hover:before { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0);
}
.mail .top-bar .close-area:focus:after, .mail .top-bar .close-area:hover:after { opacity: 1; -webkit-transform: translateX(-4px); transform: translateX(-4px);
}
.mail .top-bar .close-area .close { position: absolute; top: 0; right: 0; height: 36px; width: 100%; cursor: pointer; z-index: 2;
}
.mail .top-bar .close-area .close:before, .mail .top-bar .close-area .close:after { content: ''; position: absolute; top: 50%; right: 11px; height: 2px; width: 14px; background: #eee;
}
.mail .top-bar .close-area .close:before { -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);
}
.mail .top-bar .close-area .close:after { -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);
}
.mail textarea { -webkit-transition: background 0.3s, border-bottom 0.3s, padding 0.3s; transition: background 0.3s, border-bottom 0.3s, padding 0.3s;
}
.mail input[type="text"],
.mail input[type="email"],
.mail input[type="password"],
.mail textarea { position: relative; float: left; width: 100%; margin-bottom: 15px; border: none; border-bottom: 2px solid #08c; padding: 0 0 10px 0; background: transparent; max-width: 100%; min-width: 100%; font-family: "Raleway", sans-serif; font-size: 13px;
}
.mail input[type="text"]::-webkit-input-placeholder,
.mail input[type="email"]::-webkit-input-placeholder,
.mail input[type="password"]::-webkit-input-placeholder,
.mail textarea::-webkit-input-placeholder { color: #4d5356; font-family: "Raleway", sans-serif; font-weight: 400;
}
.mail input[type="text"]:-moz-placeholder,
.mail input[type="email"]:-moz-placeholder,
.mail input[type="password"]:-moz-placeholder,
.mail textarea:-moz-placeholder { color: #4d5356; font-family: "Raleway", sans-serif; font-weight: 400; opacity: 1;
}
.mail input[type="text"]::-moz-placeholder,
.mail input[type="email"]::-moz-placeholder,
.mail input[type="password"]::-moz-placeholder,
.mail textarea::-moz-placeholder { color: #4d5356; font-family: "Raleway", sans-serif; font-weight: 400; opacity: 1;
}
.mail input[type="text"]:-ms-input-placeholder,
.mail input[type="email"]:-ms-input-placeholder,
.mail input[type="password"]:-ms-input-placeholder,
.mail textarea:-ms-input-placeholder { color: #4d5356; font-family: "Raleway", sans-serif; font-weight: 400;
}
.mail input[type="text"]:placeholder-shown,
.mail input[type="email"]:placeholder-shown,
.mail input[type="password"]:placeholder-shown,
.mail textarea:placeholder-shown { color: #4d5356; font-family: "Raleway", sans-serif; font-weight: 400;
}
.mail input[type="text"]:focus,
.mail input[type="email"]:focus,
.mail input[type="password"]:focus,
.mail textarea:focus { outline: none; border-bottom-color: #0c8; background: #fff; padding: 10px;
}
.mail button { border: none; background: #08c; color: #eee; letter-spacing: 1px; cursor: pointer; position: relative; float: left; text-transform: uppercase; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); box-sizing: border-box; padding: 10px 20px;
}
.mail button span { font-size: 15px; position: relative; float: left; font-family: "Raleway", sans-serif;
}
.mail button:hover, .mail button:focus { outline: none; background: #0c8;
}
@media (max-width: 390px) { .mail { right: 50%; -webkit-transform: translate3d(50%, 100%, 0); transform: translate3d(50%, 100%, 0); -webkit-transform-origin: 50% 50% 50%; transform-origin: 50% 50% 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 12; } #email-popup:checked + .email { opacity: 0; right: 50%; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } #email-popup:checked ~ .mail { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); }
}
Material CSS Contact Popup - Script Codes
Material CSS Contact Popup - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 3
Size 6,039 Kb
Views 10,120
Do you need developer help for Material CSS Contact Popup?

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!

Izzy Skye (zephyr) Script Codes
Name
Mobile Material Menu Style
JQuery Slider
Pure CSS Dropdown Button
Pure CSS Menu Transition
Pure CSS Social Widget
Simple Pure CSS Loader
Responsive Menu Concept
Pure CSS Spinning Cube
Pure CSS Menu Navigation
Aperture Science style loading
Create amazing sales emails with AI!

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!