Подборка логин-панелей
Подборка из пяти современных логин-панелей для сайта.Как реализовать:
Вариант #1
Разметка html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form class="form-1"> <p class="field"> <input type="text" name="login" placeholder="Username or email"> <i class="icon-user icon-large"></i> </p> <p class="field"> <input type="password" name="password" placeholder="Password"> <i class="icon-lock icon-large"></i> </p> <p class="submit"> <button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button> </p> </form> |
Стили CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
.form-1 { /* Size & position */ width: 300px; margin: 60px auto 30px; padding: 10px; position: relative; /* For the submit button positioning */ /* Styles */ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255,255,255,1), inset 0 -3px 2px rgba(0,0,0,0.25); border-radius: 5px; background: linear-gradient(#eeefef, #ffffff 10%); } .form-1 .field { position: relative; /* For the icon positioning */ } .form-1 .field i { /* Size and position */ left: 0px; top: 0px; position: absolute; height: 36px; width: 36px; /* Line */ border-right: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7); /* Styles */ color: #777777; text-align: center; line-height: 42px; transition: all 0.3s ease-out; pointer-events: none; } .form-1 input[type=text], .form-1 input[type=password] { font-family: 'Lato', Calibri, Arial, sans-serif; font-size: 13px; font-weight: 400; text-shadow: 0 1px 0 rgba(255,255,255,0.8); /* Size and position */ width: 100%; padding: 10px 18px 10px 45px; /* Styles */ border: none; /* Remove the default border */ box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 3px 2px rgba(0,0,0,0.1); border-radius: 3px; background: #f9f9f9; color: #777; transition: color 0.3s ease-out; } .form-1 input[type=text] { margin-bottom: 10px; } .form-1 input[type=text]:hover ~ i, .form-1 input[type=password]:hover ~ i { color: #52cfeb; } .form-1 input[type=text]:focus ~ i, .form-1 input[type=password]:focus ~ i { color: #42A2BC; } .form-1 input[type=text]:focus, .form-1 input[type=password]:focus, .form-1 button[type=submit]:focus { outline: none; } .form-1 .submit { /* Size and position */ width: 65px; height: 65px; position: absolute; top: 17px; right: -25px; padding: 10px; z-index: 2; /* Styles */ background: #ffffff; border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1), inset 0 -3px 2px rgba(0,0,0,0.2); } .form-1 .submit:after { /* Size and position */ content: ""; width: 10px; height: 10px; position: absolute; top: -2px; left: 30px; /* Styles */ background: #ffffff; /* Other masks trick */ box-shadow: 0 62px white, -32px 31px white; } .form-1 button { /* Size and position */ width: 100%; height: 100%; margin-top: -1px; /* Icon styles */ font-size: 1.4em; line-height: 1.75; color: white; /* Styles */ border: none; /* Remove the default border */ border-radius: inherit; background: linear-gradient(#52cfeb, #42A2BC); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.35), inset 0 3px 2px rgba(255,255,255,0.2), inset 0 -3px 2px rgba(0,0,0,0.1); cursor: pointer; } .form-1 button:hover, .form-1 button[type=submit]:focus { background: #52cfeb; transition: all 0.3s ease-out; } .form-1 button:active { background: #42A2BC; box-shadow: inset 0 0 5px rgba(0,0,0,0.3), inset 0 3px 4px rgba(0,0,0,0.3); } |
Вариант #2
Разметка html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form class="form-2"> <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1> <p class="float"> <label for="login"><i class="icon-user"></i>Username</label> <input type="text" name="login" placeholder="Username or email"> </p> <p class="float"> <label for="password"><i class="icon-lock"></i>Password</label> <input type="password" name="password" placeholder="Password" class="showpassword"> </p> <p class="clearfix"> <a href="#" class="log-twitter">Log in with Twitter</a> <input type="submit" name="submit" value="Log in"> </p> </form> |
Стили CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 |
.form-2 { /* Size and position */ width: 340px; margin: 60px auto 30px; padding: 15px; position: relative; /* Styles */ background: #fffaf6; border-radius: 4px; color: #7e7975; box-shadow: 0 2px 2px rgba(0,0,0,0.2), 0 1px 5px rgba(0,0,0,0.2), 0 0 0 12px rgba(255,255,255,0.4); } .form-2 h1 { font-size: 15px; font-weight: bold; color: #bdb5aa; padding-bottom: 8px; border-bottom: 1px solid #EBE6E2; text-shadow: 0 2px 0 rgba(255,255,255,0.8); box-shadow: 0 1px 0 rgba(255,255,255,0.8); } .form-2 h1 .log-in, .form-2 h1 .sign-up { display: inline-block; text-transform: uppercase; } .form-2 h1 .log-in { color: #6c6763; padding-right: 2px; } .form-2 h1 .sign-up { color: #ffb347; padding-left: 2px; } .form-2 .float { width: 50%; float: left; padding-top: 15px; border-top: 1px solid rgba(255,255,255,1); } .form-2 .float:first-of-type { padding-right: 5px; } .form-2 .float:last-of-type { padding-left: 5px; } .form-2 label { display: block; padding: 0 0 5px 2px; cursor: pointer; text-transform: uppercase; font-weight: 400; text-shadow: 0 1px 0 rgba(255,255,255,0.8); font-size: 11px; } .form-2 label i { margin-right: 5px; /* Gap between icon and text */ display: inline-block; width: 10px; } .form-2 input[type=text], .form-2 input[type=password] { font-family: 'Lato', Calibri, Arial, sans-serif; font-size: 13px; font-weight: 400; display: block; width: 100%; padding: 5px; margin-bottom: 5px; border: 3px solid #ebe6e2; border-radius: 5px; transition: all 0.3s ease-out; } .form-2 input[type=text]:hover, .form-2 input[type=password]:hover { border-color: #CCC; } .form-2 label:hover ~ input { border-color: #CCC; } .form-2 input[type=text]:focus, .form-2 input[type=password]:focus { border-color: #BBB; outline: none; /* Remove Chrome's outline */ } .clearfix:after { content: ""; display: table; clear: both; } .form-2 input[type=submit], .form-2 .log-twitter { /* Size and position */ width: 49%; height: 38px; float: left; position: relative; /* Styles */ box-shadow: inset 0 1px rgba(255,255,255,0.3); border-radius: 3px; cursor: pointer; /* Font styles */ font-family: 'Lato', Calibri, Arial, sans-serif; font-size: 14px; line-height: 38px; /* Same as height */ text-align: center; font-weight: bold; } .form-2 input[type=submit] { margin-left: 1%; background: linear-gradient(#fbd568, #ffb347); border: 1px solid #f4ab4c; color: #996319; text-shadow: 0 1px rgba(255,255,255,0.3); } .form-2 .log-twitter { margin-right: 1%; background: linear-gradient(#34a5cf, #2a8ac4); border: 1px solid #2b8bc7; color: #ffffff; text-shadow: 0 -1px rgba(0,0,0,0.3); text-decoration: none; } .form-2 input[type=submit]:hover, .form-2 .log-twitter:hover { box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 20px 40px rgba(255,255,255,0.15); } .form-2 input[type=submit]:active, .form-2 .log-twitter:active{ top: 1px; } .no-boxshadow .form-2 input[type=submit]:hover { background: #ffb347; } .no-boxshadow .form-2 .log-twitter:hover { background: #2a8ac4; } .form-2 p:last-of-type { clear: both; } .form-2 .opt { text-align: right; margin-right: 3px; } .form-2 label[for=showPassword] { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 400; text-transform: capitalize; } .form-2 input[type=checkbox] { vertical-align: middle; margin: -1px 5px 0 1px; } |
javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".showpassword").each(function(index,input) { var $input = $(input); $("<p class='opt'/>").append( $("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() { var change = $(this).is(":checked") ? "text" : "password"; var rep = $("<input placeholder='Password' type='" + change + "' />") .attr("id", $input.attr("id")) .attr("name", $input.attr("name")) .attr('class', $input.attr('class')) .val($input.val()) .insertBefore($input); $input.remove(); $input = rep; }) ).append($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent()); }); $('#showPassword').click(function(){ if($("#showPassword").is(":checked")) { $('.icon-lock').addClass('icon-unlock'); $('.icon-unlock').removeClass('icon-lock'); } else { $('.icon-unlock').addClass('icon-lock'); $('.icon-lock').removeClass('icon-unlock'); } }); }); </script> |
Вариант #3
Разметка html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form class="form-3"> <p class="clearfix"> <label for="login">Username</label> <input type="text" name="login" id="login" placeholder="Username"> </p> <p class="clearfix"> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder="Password"> </p> <p class="clearfix"> <input type="checkbox" name="remember" id="remember"> <label for="remember">Remember me</label> </p> <p class="clearfix"> <input type="submit" name="submit" value="Sign in"> </p> </form> |
Стили CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
.form-3 { font-family: 'Ubuntu', 'Lato', sans-serif; font-weight: 400; /* Size and position */ width: 300px; position: relative; margin: 60px auto 30px; padding: 10px; overflow: hidden; /* Styles */ background: #111; border-radius: 0.4em; border: 1px solid #191919; box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.08), 0 16px 10px -8px rgba(0, 0, 0, 0.6); } .form-3 label { /* Size and position */ width: 50%; float: left; padding-top: 9px; /* Styles */ color: #ddd; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 1px 0 #000; text-indent: 10px; font-weight: 700; cursor: pointer; } .form-3 input[type=text], .form-3 input[type=password] { /* Size and position */ width: 50%; float: left; padding: 8px 5px; margin-bottom: 10px; font-size: 12px; /* Styles */ background: linear-gradient(#1f2124, #27292c); border: 1px solid #000; box-shadow: 0 1px 0 rgba(255,255,255,0.1); border-radius: 3px; /* Font styles */ font-family: 'Ubuntu', 'Lato', sans-serif; color: #fff; } .form-3 input[type=text]:hover, .form-3 input[type=password]:hover, .form-3 label:hover ~ input[type=text], .form-3 label:hover ~ input[type=password] { background: #27292c; } .form-3 input[type=text]:focus, .form-3 input[type=password]:focus { box-shadow: inset 0 0 2px #000; background: #494d54; border-color: #51cbee; outline: none; /* Remove Chrome outline */ } .form-3 p:nth-child(3), .form-3 p:nth-child(4) { float: left; width: 50%; } .form-3 label[for=remember] { width: auto; float: none; display: inline-block; text-transform: capitalize; font-size: 11px; font-weight: 400; letter-spacing: 0px; text-indent: 2px; } .form-3 input[type=checkbox] { margin-left: 10px; vertical-align: middle; } .form-3 input[type=submit] { /* Width and position */ width: 100%; padding: 8px 5px; /* Styles */ border: 1px solid #0273dd; /* Fallback */ border: 1px solid rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 10px 10px rgba(255,255,255,0.1); border-radius: 3px; background: #38a6f0; cursor:pointer; /* Font styles */ font-family: 'Ubuntu', 'Lato', sans-serif; color: white; font-weight: 700; font-size: 15px; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); } .form-3 input[type=submit]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); } .form-3 input[type=submit]:active { background: #287db5; box-shadow: inset 0 0 3px rgba(0,0,0,0.6); border-color: #000; /* Fallback */ border-color: rgba(0,0,0,0.9); } .no-boxshadow .form-3 input[type=submit]:hover { background: #2a92d8; } /* Gradient line */ .form-3:after { /* Size and position */ content: ""; height: 1px; width: 33%; position: absolute; left: 20%; top: 0; /* Styles */ background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); } /* Small flash */ .form-3:before { /* Size and position */ content: ""; width: 8px; height: 5px; position: absolute; left: 34%; top: -7px; /* Styles */ border-radius: 50%; box-shadow: 0 0 6px 4px #fff; } .form-3 p:nth-child(1):before{ /* Size and position */ content: ""; width: 250px; height: 100px; position: absolute; top: 0; left: 45px; /* Styles */ transform: rotate(75deg); background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0)); pointer-events: none; } .no-pointerevents .form-3 p:nth-child(1):before { display: none; } |
Вариант #4
Разметка html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form class="form-4"> <h1>Login or Register</h1> <p> <label for="login">Username or email</label> <input type="text" name="login" placeholder="Username or email" required> </p> <p> <label for="password">Password</label> <input type="password" name='password' placeholder="Password" required> </p> <p> <input type="submit" name="submit" value="Continue"> </p> </form> |
Стили CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
.form-4 { /* Size and position */ width: 300px; margin: 60px auto 30px; padding: 10px; position: relative; /* Font styles */ font-family: 'Raleway', 'Lato', Arial, sans-serif; color: white; text-shadow: 0 2px 1px rgba(0,0,0,0.3); } .form-4 h1 { font-size: 22px; padding-bottom: 20px; } .form-4 input[type=text], .form-4 input[type=password] { /* Size and position */ width: 100%; padding: 8px 4px 8px 10px; margin-bottom: 15px; /* Styles */ border: 1px solid #4e3043; /* Fallback */ border: 1px solid rgba(78,48,67, 0.8); background: rgba(0,0,0,0.15); border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; /* Font styles */ font-family: 'Raleway', 'Lato', Arial, sans-serif; color: #fff; font-size: 13px; } .form-4 input::-webkit-input-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15); } .form-4 input:-moz-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15); } .form-4 input:-ms-input-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15); } .form-4 input[type=text]:hover, .form-4 input[type=password]:hover { border-color: #333; } .form-4 input[type=text]:focus, .form-4 input[type=password]:focus, .form-4 input[type=submit]:focus { box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,255,255,0.15); outline: none; } /* Fallback */ .no-boxshadow .form-4 input[type=text]:focus, .no-boxshadow .form-4 input[type=password]:focus { outline: 1px solid white; } .form-4 input[type=submit] { /* Size and position */ width: 100%; padding: 8px 5px; /* Styles */ background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7)); border-radius: 5px; border: 1px solid #4e3043; box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s ease-out; /* Font styles */ color: white; text-shadow: 0 1px 0 rgba(0,0,0,0.3); font-size: 16px; font-weight: bold; font-family: 'Raleway', 'Lato', Arial, sans-serif; } .form-4 input[type=submit]:hover { box-shadow: inset 0 1px rgba(255,255,255,0.2), inset 0 20px 30px rgba(99,64,86,0.5); } /* Fallback */ .no-boxshadow .form-4 input[type=submit]:hover { background: #594642; } .form-4 label { display: none; padding: 0 0 5px 2px; cursor: pointer; } .form-4 label:hover ~ input { border-color: #333; } .no-placeholder .form-4 label { display: block; } |
Вариант #5
Разметка html
1 2 3 4 5 6 7 8 9 10 |
<form class="form-5 clearfix"> <p> <input type="text" id="login" name="login" placeholder="Username"> <input type="password" name="password" id="password" placeholder="Password"> </p> <button type="submit" name="submit"> <i class="icon-arrow-right"></i> <span>Sign in</span> </button> </form> |
Стили CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
.form-5 { /* Size and position */ width: 300px; margin: 60px auto 30px; position: relative; /* Styles */ border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1); } .form-5 p { width: 70%; float: left; border-radius: 5px 0 0 5px; border: 1px solid #fff; border-right: none; } .form-5 input[type=text], .form-5 input[type=password] { /* Size and position */ width: 100%; height: 50px; padding: 0 10px; /* Styles */ border: none; /* Remove the default border */ background: white; /* Fallback */ background: rgba(255,255,255,0.2); box-shadow: inset 0 0 10px rgba(255,255,255,0.5); /* Font styles */ font-family: 'Montserrat', sans-serif; text-indent: 10px; color: #ee4c8d; text-shadow: 0 1px 2px rgba(0,0,0,0.3); font-size: 20px; } .form-5 input[type=text] { border-bottom: 1px solid #fff; /* Fallback */ border-bottom: 1px solid rgba(255,255,255,0.7); border-radius: 5px 0 0 0; } .form-5 input[type=password] { border-top: 1px solid #CCC; /* Fallback */ border-top: 1px solid rgba(0,0,0,0.1); border-radius: 0 0 0 5px; } .form-5 input[type=text]:hover, .form-5 input[type=password]:hover, .form-5 input[type=text]:focus, .form-5 input[type=password]:focus { background: #f7def7; /* Fallback */ background: rgba(255,255,255,0.4); outline: none; } .form-5 input::-webkit-input-placeholder { color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); font-family: 'Handlee', cursive; } .form-5 input:-moz-placeholder { color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); font-family: 'Handlee', cursive; } .form-5 input:-ms-input-placeholder { color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); font-family: 'Handlee', cursive; } .form-5 button { /* Size and position */ width: 30%; height: 102px; float: left; position: relative; overflow: hidden; /* Styles */ background: url(../images/noise.png), radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%); border-radius: 0 5px 5px 0; box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.2); border: none; border-left: 1px solid silver; cursor: pointer; line-height: 102px; /* Same as height */ } .form-5 button i { position: absolute; width: 100%; height: 100%; top: 0; left: -20px; font-size: 64px; line-height: 109px; color: #8d1645; opacity: 0; text-shadow: 0 1px 0 rgba(255,255,255,0.4); transition: all 0.2s ease-out; } .form-5 button span { display: block; /* Font styles */ color: #8d1645; font-family: 'Montserrat', Arial, sans-serif; font-size: 20px; text-shadow: 0 1px 0 rgba(255,255,255,0.4); transform: rotate(-90deg); transition: all 0.2s linear; } .form-5 button:focus { outline: none; } .form-5 button:hover span, .form-5 button:focus span { opacity: 0; transform: rotate(-90deg) translateY(-20px); } .form-5 button:hover i, .form-5 button:focus i { opacity: 0.5; left: 0; transition-delay: 0.2s; } /* Click on button */ .form-5 button:active span, .form-5 button:active i { transition: none; } .form-5 button:active span { opacity: 0; } .form-5 button:active i { opacity: 0.5; left: 0; color: #fff; } |
javascript
1 2 3 4 5 6 7 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.placeholder.min.js"></script> <script type="text/javascript"> $(function(){ $('input, textarea').placeholder(); }); </script> |
Готово.