Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 440069" data-attributes="member: 1872">It’s an old effect but one that I’ve only recently wanted to start implementing into projects, so here’s my attempt at achieving Google Material text inputs. You know the one.. where the line at the bottom of the field expands outwardsUse as you wishYou can view the pen here:<a href="https://codepen.io/Markshall/pen/JmxdMW" target="_blank">https://codepen.io/Markshall/pen/JmxdMW</a>Or find the code here:[PHP]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;&nbsp; &lt;meta charset=&quot;UTF-8&quot;&gt;&nbsp; &lt;title&gt;Document&lt;/title&gt;&nbsp;&nbsp; &lt;style&gt;&nbsp; &nbsp; * {&nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; font: 400 14px/1.6 'Helvetica Neue', Arial, sans-serif;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; .wrapper {&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; transform: translate(-50%, -50%);&nbsp; &nbsp; &nbsp; padding: 15px 20px;&nbsp; &nbsp; &nbsp; width: 350px;&nbsp; &nbsp; &nbsp; background-color: #e9e9e9;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; .input-group {&nbsp; &nbsp; &nbsp; margin-bottom: 15px;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; .input-wrapper {&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; input[type=&quot;text&quot;], input[type=&quot;password&quot;], input[type=&quot;email&quot;], input[type=&quot;submit&quot;] {&nbsp; &nbsp; &nbsp; border: 0;&nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; font: inherit;&nbsp; &nbsp; &nbsp; font-size: 13px;&nbsp; &nbsp; &nbsp; outline: none;&nbsp; &nbsp; &nbsp; padding: 6px 9px;&nbsp; &nbsp; &nbsp; border-radius: 3px;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; input[type=&quot;submit&quot;] {&nbsp; &nbsp; &nbsp; background-color: cornflowerblue;&nbsp; &nbsp; &nbsp; border: 1px solid;&nbsp; &nbsp; &nbsp; border-color: #4572c3 #4572c3 #375fa7 #4572c3;&nbsp; &nbsp; &nbsp; border-bottom-width: 3px;&nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; transition: all .2s ease-in-out;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; input[type=&quot;submit&quot;]:hover {&nbsp; &nbsp; &nbsp; transform: scale(1.02);&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; input[type=&quot;submit&quot;]:active {&nbsp; &nbsp; &nbsp; transform: scale(0.98);&nbsp; &nbsp; &nbsp; border-bottom-width: 1px;&nbsp; &nbsp; &nbsp; box-shadow: 0 5px 20px rgba(0, 0, 0, .3);&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; .input-line {&nbsp; &nbsp; &nbsp; height: 1px;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; background-color: cornflowerblue;&nbsp; &nbsp; &nbsp; transition: all .4s ease;&nbsp; &nbsp; &nbsp; width: 0px;&nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; transform: translateY(-50%);&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; .input-wrapper input:focus {&nbsp; &nbsp; &nbsp; border-bottom-left-radius: 0px;&nbsp; &nbsp; &nbsp; border-bottom-right-radius: 0px;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; .input-wrapper input:focus ~ .input-line {&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; }&nbsp; &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&nbsp;&nbsp;&nbsp; &lt;div class=&quot;wrapper&quot;&gt;&nbsp;&nbsp; &nbsp; &lt;div class=&quot;input-group&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;&nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; autocomplete=&quot;off&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-line&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp;&nbsp; &nbsp; &lt;div class=&quot;input-group&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;&nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; autocomplete=&quot;off&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-line&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp;&nbsp; &nbsp; &lt;div class=&quot;input-group&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;&nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;email&quot; name=&quot;email&quot; id=&quot;email&quot; autocomplete=&quot;off&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-line&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp;&nbsp; &nbsp; &lt;input type=&quot;submit&quot; value=&quot;Sign up&quot;&gt;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&lt;/body&gt;&lt;/html&gt;[/PHP]</blockquote>

[QUOTE="Markshall, post: 440069, member: 1872"] It’s an old effect but one that I’ve only recently wanted to start implementing into projects, so here’s my attempt at achieving Google Material text inputs. You know the one.. where the line at the bottom of the field expands outwards Use as you wish You can view the pen here: [URL]https://codepen.io/Markshall/pen/JmxdMW[/URL] Or find the code here: [PHP]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { box-sizing: border-box; } body { font: 400 14px/1.6 'Helvetica Neue', Arial, sans-serif; } .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px 20px; width: 350px; background-color: #e9e9e9; } .input-group { margin-bottom: 15px; } .input-wrapper { position: relative; } input[type="text"], input[type="password"], input[type="email"], input[type="submit"] { border: 0; margin: 0; font: inherit; font-size: 13px; outline: none; padding: 6px 9px; border-radius: 3px; width: 100%; background-color: #fff; } input[type="submit"] { background-color: cornflowerblue; border: 1px solid; border-color: #4572c3 #4572c3 #375fa7 #4572c3; border-bottom-width: 3px; cursor: pointer; color: #fff; transition: all .2s ease-in-out; } input[type="submit"]:hover { transform: scale(1.02); } input[type="submit"]:active { transform: scale(0.98); border-bottom-width: 1px; box-shadow: 0 5px 20px rgba(0, 0, 0, .3); } .input-line { height: 1px; position: absolute; background-color: cornflowerblue; transition: all .4s ease; width: 0px; left: 50%; transform: translateY(-50%); } .input-wrapper input:focus { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .input-wrapper input:focus ~ .input-line { width: 100%; left: 0; right: 0; } </style> </head> <body> <div class="wrapper"> <div class="input-group"> <label for="username">Username</label> <div class="input-wrapper"> <input type="text" name="username" id="username" autocomplete="off" /> <div class="input-line"></div> </div> </div> <div class="input-group"> <label for="password">Password</label> <div class="input-wrapper"> <input type="password" name="password" id="password" autocomplete="off" /> <div class="input-line"></div> </div> </div> <div class="input-group"> <label for="email">Email</label> <div class="input-wrapper"> <input type="email" name="email" id="email" autocomplete="off" /> <div class="input-line"></div> </div> </div> <input type="submit" value="Sign up"> </div> </body> </html>[/PHP] [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members