Skip to content

Instantly share code, notes, and snippets.

@jocubeit
Created March 18, 2019 02:08
Show Gist options
  • Save jocubeit/1d7957fd910bf6d1d15921fcff4ed358 to your computer and use it in GitHub Desktop.
Save jocubeit/1d7957fd910bf6d1d15921fcff4ed358 to your computer and use it in GitHub Desktop.
Webflow-style email input
<div class="container">
<div class="demo-flex-spacer"></div>
<div class="webflow-style-input">
<input class="" type="email" placeholder="What's your email?"></input>
<button type="submit"><i class="icon ion-android-arrow-forward"></i></button>
</div>
<div class="demo-flex-spacer"></div>
<h1 class="demo">Webflow-style input</h1>
<a class="demo" href="https://webflow.com/cms" title="Webflow CMS">https://webflow.com/cms</a>
</div>
/* ====================================================
Recreating the email field from https://webflow.com/cms. Just an experiment - not as cross-browser friendly as the original.
Changed:
- animated gradient bar to :after element
- flexbox for layout
==================================================== */
// reset
html { box-sizing: border-box; font-size: 10px; }
*, *:before, *:after { box-sizing: inherit; }
body, ul, li { margin: 0; padding: 0; }
li { list-style: none; }
p, h1, h2, h3, h4, h5, h6 { margin-top: 0; }
a { text-decoration: none; }
input { border-style: none; background: transparent; outline: none; }
button { padding: 0; background: none; border: none; outline: none; }
// some basic page styles
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-image: radial-gradient(circle at 0% 0%, #373b52, #252736 51%, #1d1e26);
}
// for demo
h1.demo {
text-align: center;
font-size: 2.4rem;
font-weight: normal;
margin-bottom: 1rem;
color: #f5f6ff;
}
a.demo {
text-align: center;
font-size: 1.6rem;
font-weight: normal;
color: rgba(202, 205, 239, 0.8);
margin-bottom: 3rem;
}
.demo-flex-spacer {
flex-grow: 1;
}
.container {
display: flex;
flex-direction: column;
//justify-content: center;
height: 100vh;
max-width: 1600px;
padding: 0 15px;
margin: 0 auto;
}
// colors
$input-background: rgba(57, 63, 84, 0.8);
$input-text-inactive: #7881A1;
$input-text-active: #BFD2FF;
// gradient animation
@keyframes gradient {
0%{background-position:0 0}
100%{background-position:100% 0}
}
.webflow-style-input {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
max-width: 400px;
margin: 0 auto;
border-radius: 2px;
padding: 1.4rem 2rem 1.6rem;
background: $input-background;
&:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 999;
height: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
background-position: 0% 0%;
background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
background-size: 500% auto;
animation: gradient 3s linear infinite;
}
}
.webflow-style-input input {
flex-grow: 1;
color: $input-text-active;
font-size: 1.8rem;
line-height: 2.4rem;
vertical-align: middle;
&::-webkit-input-placeholder {
color: $input-text-inactive;
}
}
.webflow-style-input button {
color: $input-text-inactive;
font-size: 2.4rem;
line-height: 2.4rem;
vertical-align: middle;
transition: color .25s;
&:hover {
color: $input-text-active;
}
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment