Material Design Signup Interaction

Developer
Kyle Lavery
Size
4,138 Kb
Views
36,432
  1. Material Design Signup Interaction Previews
  2. Material Design Signup Interaction HTML Codes
  3. Material Design Signup Interaction CSS Codes
  4. Material Design Signup Interaction JS Codes

How do I make an material design signup interaction?

Based on this Dribbble shot:https://dribbble.com/shots/2379703-Material-Signup-Interaction. What is a material design signup interaction? How do you make a material design signup interaction? This script and codes were developed by Kyle Lavery on 26 August 2022, Friday.

Material Design Signup Interaction Previews
IQ Test

Material Design Signup Interaction - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Signup Interaction</title> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app"> <div class="content"> <div class="header hidden"></div> <div class="button"> <div class="sign-up">SIGN UP</div> <form class="hidden form"> <input type="text" placeholder="Username"/> <input type="email" placeholder="Email Id"/> <input type="password" placeholder="Password"/> </form> <button class="hidden"><span class="text">DONE</span></button> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Design Signup Interaction - Script Codes CSS Codes

body { background: #AFF7F0; font-family: Roboto; overflow: hidden;
}
.app { height: 500px; width: 281px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.content { background: #5E2E91 url("https://cbwconline.com/IMG/Codepen/Mountains.svg") center 20% no-repeat; background-size: 75px; height: 100%; width: 100%; transition: .3s .2s;
}
.content.background { background: #5E2E91 url("https://cbwconline.com/IMG/Codepen/Mountains.svg") center 15% no-repeat; background-size: 75px;
}
.button { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); background: #F9F9F9; background-position: 0 200px; height: 56px; width: 120px; margin: auto; position: absolute; left: 0; right: 0; top: 75%; border-radius: 28px; transition: width .3s, border-radius .3s, height .3s .1s, top .3s .1s, background .0s .6s;
}
.button.expanded { height: 250px; width: 90%; border-radius: 5px; top: 35%;
}
.button.full { height: 100%; width: 100%; top: 0; border-radius: 0; background: #F9F9F9 url("https://cbwconline.com/IMG/Codepen/Background.svg") no-repeat; background-size: 100%; background-position: 0 0; transition: .5s;
}
form { width: 100%; margin: auto; height: 100%; position: relative; text-align: center; transition: .3s .6s;
}
form.hidden { visibility: hidden; opacity: 0; pointer-events: none; transition: .01s;
}
input { display: inline-block; background: #F9F9F9; width: 90%; margin: 15px auto; border: 0; border-bottom: 1px solid lightgrey; padding: 12px 0; outline: 0; font-size: 15px;
}
.sign-up { width: 100%; height: 22px; padding: 20px 0; margin: auto; position: absolute; top: 0; bottom: 0; color: #5E2E91; font: 500 20px Roboto; text-align: center; cursor: pointer; transition: .5s;
}
.sign-up.hidden { visibility: hidden; opacity: 0;
}
button { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); background: #14FFB5; height: 56px; width: 120px; padding: 0; margin: auto; border: none; border-radius: 28px; outline: none; overflow: hidden; position: absolute; bottom: -20px; left: 0; right: 0; color: #F9F9F9; font: 500 20px Roboto; cursor: pointer; transition: .3s .7s, background .1s .3s;
}
button.hidden { width: 0;
}
button.fab { background: #14FFB5 url("https://cbwconline.com/IMG/Codepen/Add.svg") center center no-repeat; width: 56px; height: 56px; margin: 0; top: auto; bottom: 10px; left: auto; right: 10px; transition: .3s;
}
.header { background: #5E2E91 url("https://cbwconline.com/IMG/Codepen/Menu.svg") 8% 50% no-repeat; width: 100%; height: 56px; position: absolute; top: 0; z-index: 5; transition: .5s .3s;
}
.header.hidden { top: -100%;
}

Material Design Signup Interaction - Script Codes JS Codes

// My Crappy JS Skills :/
$(".sign-up").on('click', function() { $(".button").addClass("expanded"); $(".sign-up").addClass("hidden"); $(".content").addClass("background"); $("button").removeClass("hidden"); $("form").toggleClass("hidden");
})
$("button").on('click', function() { $(this).addClass("fab"); $("form").addClass("hidden"); $(".button").addClass("full"); $(".text").remove(); $(".header").removeClass("hidden");
})
Material Design Signup Interaction - Script Codes
Material Design Signup Interaction - Script Codes
Home Page Home
Developer Kyle Lavery
Username koenigsegg1
Uploaded August 26, 2022
Rating 4.5
Size 4,138 Kb
Views 36,432
Do you need developer help for Material Design Signup Interaction?

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!

Kyle Lavery (koenigsegg1) Script Codes
Name
Vintage Neon Sign
CSS Design Awards Button In CSS
Dominant Color Lazy Loading
Social Share Button
A Pen by Kyle Lavery
Button
Minimal Material Design Form Input
View My Profile Animated FAB
Idea
Responsive Flex Layout With Tabs - Material Design
Create amazing Facebook ads 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!