"Border effects"
Bootstrap 4.1.1 Snippet by dkstudio

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Awesome input focus effects using css3 - usingcss3</title> <meta name="description" content="Awesome input focus effects using css3. When you focus on input or textarea you see awesome label and background effects"> <meta name="keyword" content="input focus, input focus effects, label effects, textarea effects, form input, form effects, custom input, input effects, text effects, input hover, focus effect, input glow, glow effects, border effects, input border"> <meta name="abstract" content="input focus, input focus effects, label effects, textarea effects, form input, form effects, custom input, input effects, text effects, input hover, focus effect, input glow, glow effects, border effects, input border"> <meta name="author" content="Sanjay Jadon"> <meta name="technologies" content="HTML5, CSS3, HTML, CSS, JQUERY"> <meta name="distribution" content="Global"> <meta name="development" content="Sanjay Jadon"> <meta name="robots" content="index, follow"> <meta name="googlebot" content="index, follow"> <meta name="city" content="New Delhi"> <meta name="country" content="india"> <link rel="icon" href="http://usingcss3.com/wp-content/uploads/2016/01/cropped-favicon-32x32-1-32x32.png" sizes="32x32"> <link rel="icon" href="http://usingcss3.com/wp-content/uploads/2016/01/cropped-favicon-32x32-1-192x192.png" sizes="192x192"> <link rel="apple-touch-icon-precomposed" href="http://usingcss3.com/wp-content/uploads/2016/01/cropped-favicon-32x32-1-180x180.png"> <link href="https://fonts.googleapis.com/css?family=Lato:400,300,700,900" rel="stylesheet" type="text/css"> </head> <body> <div class="row"> <div class="container"> <h2>Border effects</h2> <div class="col-3"> <input class="effect-1" type="text" placeholder="Placeholder Text"><span class="focus-border"></span> </div> <div class="col-3"> <input class="effect-2" type="text" placeholder="Placeholder Text"><span class="focus-border"></span> </div> <div class="col-3"> <input class="effect-3" type="text" placeholder="Placeholder Text"><span class="focus-border"></span> </div> <div class="col-3"> <input class="effect-4" type="text" placeholder="Placeholder Text"><span class="focus-border"></span> </div> <div class="col-3"> <input class="effect-5" type="text" placeholder="Placeholder Text"><span class="focus-border"></span> </div> <div class="col-3"> <input class="effect-6" type="text" placeholder="Placeholder Text"><span class="focus-border"></span> </div> <div class="col-3"> <input class="effect-7" type="text" placeholder="Placeholder Text"><span class="focus-border"><i></i></span> </div> <div class="col-3"> <input class="effect-8" type="text" placeholder="Placeholder Text"><span class="focus-border"><i></i></span> </div> <div class="col-3"> <input class="effect-9" type="text" placeholder="Placeholder Text"><span class="focus-border"><i></i></span> </div> <h2>Background Effects</h2> <div class="col-3"> <input class="effect-10" type="text" placeholder="Placeholder Text"><span class="focus-bg"></span> </div> <div class="col-3"> <input class="effect-11" type="text" placeholder="Placeholder Text"><span class="focus-bg"></span> </div> <div class="col-3"> <input class="effect-12" type="text" placeholder="Placeholder Text"><span class="focus-bg"></span> </div> <div class="col-3"> <input class="effect-13" type="text" placeholder="Placeholder Text"><span class="focus-bg"></span> </div> <div class="col-3"> <input class="effect-14" type="text" placeholder="Placeholder Text"><span class="focus-bg"></span> </div> <div class="col-3"> <input class="effect-15" type="text" placeholder="Placeholder Text"><span class="focus-bg"></span> </div> <h2>Input with Label Effects</h2> <div class="col-3 input-effect"> <input class="effect-16" type="text" placeholder=""> <label>First Name</label><span class="focus-border"></span> </div> <div class="col-3 input-effect"> <input class="effect-17" type="text" placeholder=""> <label>First Name</label><span class="focus-border"></span> </div> <div class="col-3 input-effect"> <input class="effect-18" type="text" placeholder=""> <label>First Name</label><span class="focus-border"></span> </div> <div class="col-3 input-effect"> <input class="effect-19" type="text" placeholder=""> <label>First Name</label><span class="focus-border"><i></i></span> </div> <div class="col-3 input-effect"> <input class="effect-20" type="text" placeholder=""> <label>First Name</label><span class="focus-border"><i></i></span> </div> <div class="col-3 input-effect"> <input class="effect-21" type="text" placeholder=""> <label>First Name</label><span class="focus-border"><i></i></span> </div> <div class="col-3 input-effect"> <input class="effect-22" type="text" placeholder=""> <label>First Name</label><span class="focus-bg"></span> </div> <div class="col-3 input-effect"> <input class="effect-23" type="text" placeholder=""> <label>First Name</label><span class="focus-bg"></span> </div> <div class="col-3 input-effect"> <input class="effect-24" type="text" placeholder=""> <label>First Name</label><span class="focus-bg"></span> </div> </div> </div> </body> </html>
/*= Reset CSS *============= */ html { border: 0; margin: 0; padding: 0; } body { border: 0; margin: 0; padding: 0; font: 14px "Lato", Arial, sans-serif; min-width: 100%; min-height: 100%; color: #666; } .container { margin: 0 auto; max-width: 1200px; } * { margin: 0; padding: 0; box-sizing: border-box; } .row { float: left; width: 100%; padding: 20px 0 50px; } h2 { text-align: center; color: #2079df; font-size: 28px; float: left; width: 100%; margin: 30px 0; position: relative; line-height: 58px; font-weight: 400; } h2:before { content: ""; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; background-color: #2079df; margin-left: -50px; } /*= Reset CSS End *================= */ /*= input focus effects css *=========================== */ :focus { outline: none; } .col-3 { float: left; width: 27.33%; margin: 40px 3%; position: relative; } /* necessary to give position: relative to parent. */ input[type="text"] { font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; } .effect-1, .effect-2, .effect-3 { border: 0; padding: 7px 0; border-bottom: 1px solid #ccc; } .effect-1 ~ .focus-border { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-1:focus ~ .focus-border { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .effect-2 ~ .focus-border { position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-2:focus ~ .focus-border { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; left: 0; } .effect-3 ~ .focus-border { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 99; } .effect-3 ~ .focus-border:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-3 ~ .focus-border:after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; left: auto; right: 0; } .effect-3:focus ~ .focus-border:before, .effect-3:focus ~ .focus-border:after { width: 50%; -webkit-transition: 0.4s; transition: 0.4s; } .effect-4, .effect-5, .effect-6 { border: 0; padding: 5px 0 7px; border: 1px solid transparent; border-bottom-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; } .effect-4:focus, .effect-5:focus, .effect-6:focus { padding: 5px 14px 7px; -webkit-transition: 0.4s; transition: 0.4s; } .effect-4 ~ .focus-border { position: absolute; height: 0; bottom: 0; left: 0; width: 100%; -webkit-transition: 0.4s; transition: 0.4s; z-index: -1; } .effect-4:focus ~ .focus-border { -webkit-transition: 0.4s; transition: 0.4s; height: 36px; border: 2px solid #3399FF; z-index: 1; } .effect-5 ~ .focus-border { position: absolute; height: 36px; bottom: 0; left: 0; width: 0; -webkit-transition: 0.4s; transition: 0.4s; } .effect-5:focus ~ .focus-border { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; border: 2px solid #3399FF; } .effect-6 ~ .focus-border { position: absolute; height: 36px; bottom: 0; right: 0; width: 0; -webkit-transition: 0.4s; transition: 0.4s; } .effect-6:focus ~ .focus-border { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; border: 2px solid #3399FF; } .effect-7, .effect-8, .effect-9 { border: 1px solid #ccc; padding: 7px 14px 9px; -webkit-transition: 0.4s; transition: 0.4s; } .effect-7 ~ .focus-border:before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-7 ~ .focus-border:after { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; top: auto; bottom: 0; } .effect-7 ~ .focus-border i:before { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.6s; transition: 0.6s; } .effect-7 ~ .focus-border i:after { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.6s; transition: 0.6s; left: auto; right: 0; } .effect-7:focus ~ .focus-border:before, .effect-7:focus ~ .focus-border:after { left: 0; width: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .effect-7:focus ~ .focus-border i:before, .effect-7:focus ~ .focus-border i:after { top: 0; height: 100%; -webkit-transition: 0.6s; transition: 0.6s; } .effect-8 ~ .focus-border:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .effect-8 ~ .focus-border:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; top: auto; bottom: 0; left: auto; right: 0; } .effect-8 ~ .focus-border i:before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-8 ~ .focus-border i:after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; left: auto; right: 0; top: auto; bottom: 0; } .effect-8:focus ~ .focus-border:before, .effect-8:focus ~ .focus-border:after { width: 100%; -webkit-transition: 0.3s; transition: 0.3s; } .effect-8:focus ~ .focus-border i:before, .effect-8:focus ~ .focus-border i:after { height: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .effect-9 ~ .focus-border:before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .effect-9 ~ .focus-border:after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; top: auto; bottom: 0; right: auto; left: 0; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .effect-9 ~ .focus-border i:before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.2s; transition: 0.2s; } .effect-9 ~ .focus-border i:after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.2s; transition: 0.2s; left: auto; right: 0; top: auto; bottom: 0; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .effect-9:focus ~ .focus-border:before { width: 100%; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .effect-9:focus ~ .focus-border:after { width: 100%; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .effect-9:focus ~ .focus-border i:before { height: 100%; -webkit-transition: 0.2s; transition: 0.2s; } .effect-9:focus ~ .focus-border i:after { height: 100%; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .effect-10, .effect-11, .effect-12, .effect-13, .effect-14, .effect-15 { border: 0; padding: 7px 15px; border: 1px solid #ccc; position: relative; background: transparent; } .effect-10 ~ .focus-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ededed; opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; z-index: -1; } .effect-10:focus ~ .focus-bg { -webkit-transition: 0.5s; transition: 0.5s; opacity: 1; } .effect-11 ~ .focus-bg { position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #ededed; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; } .effect-11:focus ~ .focus-bg { -webkit-transition: 0.3s; transition: 0.3s; width: 100%; } .effect-12 ~ .focus-bg { position: absolute; left: 50%; top: 0; width: 0; height: 100%; background-color: #ededed; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; } .effect-12:focus ~ .focus-bg { -webkit-transition: 0.3s; transition: 0.3s; width: 100%; left: 0; } .effect-13 ~ .focus-bg:before, .effect-13 ~ .focus-bg:after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #ededed; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; } .effect-13:focus ~ .focus-bg:before, .effect-13:focus ~ .focus-bg:after { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; } .effect-13 ~ .focus-bg:after { left: auto; right: 0; } .effect-14 ~ .focus-bg:before, .effect-14 ~ .focus-bg:after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; background-color: #ededed; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; } .effect-14:focus ~ .focus-bg:before, .effect-14:focus ~ .focus-bg:after { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; height: 100%; } .effect-14 ~ .focus-bg:after { left: auto; right: 0; top: auto; bottom: 0; } .effect-15 ~ .focus-bg:before, .effect-15 ~ .focus-bg:after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; background-color: #ededed; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; } .effect-15:focus ~ .focus-bg:before { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; left: 0; top: 0; height: 100%; } .effect-15:focus ~ .focus-bg:after { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; height: 100%; bottom: 0; right: 0; } .effect-15 ~ .focus-bg:after { left: auto; right: 50%; top: auto; bottom: 50%; } .effect-16, .effect-17, .effect-18 { border: 0; padding: 4px 0; border-bottom: 1px solid #ccc; background-color: transparent; } .effect-16 ~ .focus-border { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-16:focus ~ .focus-border { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .has-content.effect-16 ~ .focus-border { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .effect-16 ~ label { position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-16:focus ~ label { top: -16px; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-16 ~ label { top: -16px; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .effect-17 ~ .focus-border { position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-17:focus ~ .focus-border { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; left: 0; } .has-content.effect-17 ~ .focus-border { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; left: 0; } .effect-17 ~ label { position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-17:focus ~ label { top: -16px; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-17 ~ label { top: -16px; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .effect-18 ~ .focus-border { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 99; } .effect-18 ~ .focus-border:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-18 ~ .focus-border:after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; left: auto; right: 0; } .effect-18:focus ~ .focus-border:before, .effect-18:focus ~ .focus-border:after { width: 50%; -webkit-transition: 0.4s; transition: 0.4s; } .has-content.effect-18 ~ .focus-border:before, .has-content.effect-18 ~ .focus-border:after { width: 50%; -webkit-transition: 0.4s; transition: 0.4s; } .effect-18 ~ label { position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-18:focus ~ label { top: -16px; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-18 ~ label { top: -16px; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .effect-19, .effect-20, .effect-21 { border: 1px solid #ccc; padding: 7px 14px; -webkit-transition: 0.4s; transition: 0.4s; background: transparent; } .effect-19 ~ .focus-border:before { content: ""; position: absolute; top: -1px; left: 50%; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-19 ~ .focus-border:after { content: ""; position: absolute; top: -1px; left: 50%; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; top: auto; bottom: 0; } .effect-19 ~ .focus-border i:before { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.6s; transition: 0.6s; } .effect-19 ~ .focus-border i:after { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.6s; transition: 0.6s; left: auto; right: 0; } .effect-19:focus ~ .focus-border:before, .effect-19:focus ~ .focus-border:after { left: 0; width: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .has-content.effect-19 ~ .focus-border:before, .has-content.effect-19 ~ .focus-border:after { left: 0; width: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .effect-19:focus ~ .focus-border i:before, .effect-19:focus ~ .focus-border i:after { top: -1px; height: 100%; -webkit-transition: 0.6s; transition: 0.6s; } .has-content.effect-19 ~ .focus-border i:before, .has-content.effect-19 ~ .focus-border i:after { top: -1px; height: 100%; -webkit-transition: 0.6s; transition: 0.6s; } .effect-19 ~ label { position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-19:focus ~ label { top: -18px; left: 0; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-19 ~ label { top: -18px; left: 0; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .effect-20 ~ .focus-border:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .effect-20 ~ .focus-border:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; top: auto; bottom: 0; left: auto; right: 0; } .effect-20 ~ .focus-border i:before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; } .effect-20 ~ .focus-border i:after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.4s; transition: 0.4s; left: auto; right: 0; top: auto; bottom: 0; } .effect-20:focus ~ .focus-border:before, .effect-20:focus ~ .focus-border:after { width: 100%; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-20 ~ .focus-border:before, .has-content.effect-20 ~ .focus-border:after { width: 100%; -webkit-transition: 0.3s; transition: 0.3s; } .effect-20:focus ~ .focus-border i:before, .effect-20:focus ~ .focus-border i:after { height: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .has-content.effect-20 ~ .focus-border i:before, .has-content.effect-20 ~ .focus-border i:after { height: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .effect-20 ~ label { position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-20:focus ~ label { top: -18px; left: 0; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-20 ~ label { top: -18px; left: 0; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .effect-21 ~ .focus-border:before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .effect-21 ~ .focus-border:after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; top: auto; bottom: 0; right: auto; left: 0; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .effect-21 ~ .focus-border i:before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.2s; transition: 0.2s; } .effect-21 ~ .focus-border i:after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; -webkit-transition: 0.2s; transition: 0.2s; left: auto; right: 0; top: auto; bottom: 0; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .effect-21:focus ~ .focus-border:before, .effect-21:focus ~ .focus-border:after { width: 100%; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .has-content.effect-21 ~ .focus-border:before, .has-content.effect-21 ~ .focus-border:after { width: 100%; -webkit-transition: 0.2s; transition: 0.2s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .effect-21:focus ~ .focus-border:after, .has-content.effect-21 ~ .focus-border:after { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .effect-21:focus ~ .focus-border i:before, .effect-21:focus ~ .focus-border i:after { height: 100%; -webkit-transition: 0.2s; transition: 0.2s; } .has-content.effect-21 ~ .focus-border i:before, .has-content.effect-21 ~ .focus-border i:after { height: 100%; -webkit-transition: 0.2s; transition: 0.2s; } .effect-21:focus ~ .focus-border i:after, .has-conten.effect-21 ~ .focus-border i:after { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .effect-21 ~ label { position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-21:focus ~ label { top: -18px; left: 0; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-21 ~ label { top: -18px; left: 0; font-size: 12px; color: #3399FF; -webkit-transition: 0.3s; transition: 0.3s; } .effect-22, .effect-23, .effect-24 { border: 0; padding: 7px 15px; border: 1px solid #ccc; position: relative; background: transparent; } .effect-22 ~ .focus-bg { position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: transparent; -webkit-transition: 0.4s; transition: 0.4s; z-index: -1; } .effect-22:focus ~ .focus-bg { -webkit-transition: 0.4s; transition: 0.4s; width: 100%; background-color: #ededed; } .has-content.effect-22 ~ .focus-bg { -webkit-transition: 0.4s; transition: 0.4s; width: 100%; background-color: #ededed; } .effect-22 ~ label { position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-22:focus ~ label { top: -18px; left: 0; font-size: 12px; color: #333; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-22 ~ label { top: -18px; left: 0; font-size: 12px; color: #333; -webkit-transition: 0.3s; transition: 0.3s; } .effect-23 ~ .focus-bg:before, .effect-23 ~ .focus-bg:after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; background-color: #ededed; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; } .effect-23:focus ~ .focus-bg:before { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; height: 100%; } .has-content.effect-23 ~ .focus-bg:before { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; height: 100%; } .effect-23 ~ .focus-bg:after { left: auto; right: 0; top: auto; bottom: 0; } .effect-23:focus ~ .focus-bg:after { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; height: 100%; } .has-content.effect-23 ~ .focus-bg:after { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; height: 100%; } .effect-23 ~ label { position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-23:focus ~ label { top: -18px; left: 0; font-size: 12px; color: #333; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-23 ~ label { top: -18px; left: 0; font-size: 12px; color: #333; -webkit-transition: 0.3s; transition: 0.3s; } .effect-24 ~ .focus-bg:before, .effect-24 ~ .focus-bg:after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; background-color: #ededed; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; } .effect-24:focus ~ .focus-bg:before { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; left: 0; top: 0; height: 100%; } .has-content.effect-24 ~ .focus-bg:before { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; left: 0; top: 0; height: 100%; } .effect-24 ~ .focus-bg:after { left: auto; right: 50%; top: auto; bottom: 50%; } .effect-24:focus ~ .focus-bg:after { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; height: 100%; bottom: 0; right: 0; } .has-content.effect-24 ~ .focus-bg:after { -webkit-transition: 0.3s; transition: 0.3s; width: 50%; height: 100%; bottom: 0; right: 0; } .effect-24 ~ label { position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; letter-spacing: 0.5px; } .effect-24:focus ~ label { top: -18px; left: 0; font-size: 12px; color: #333; -webkit-transition: 0.3s; transition: 0.3s; } .has-content.effect-24 ~ label { top: -18px; left: 0; font-size: 12px; color: #333; -webkit-transition: 0.3s; transition: 0.3s; } /*= input focus effects css End *=============================== */

Related: See More


Questions / Comments: