\n
\n
![\"H\u01b0\u1edbng](\"https:\/\/dl.dropboxusercontent.com\/u\/1552467\/forum\/2013\/CustomLoginForms_01.jpg\")
<\/p>\nCh\u00e0o c\u00e1c b\u1ea1n, trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y ch\u00fang t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n t\u1ea1o m\u1ed9t form \u0111\u0103ng nh\u1eadp b\u1eb1ng CSS3.
\n
\n<\/p>\n
\r\n<form class="form">\r\n <p class="field">\r\n <input type="text" name="login" placeholder="Username or email">\r\n <i class="icon-user icon-large"><\/i>\r\n <\/p>\r\n <p class="field">\r\n <input type="password" name="password" placeholder="Password">\r\n <i class="icon-lock icon-large"><\/i>\r\n <\/p> \r\n <p class="submit">\r\n <button type="submit" name="submit"><i class="icon-arrow-right icon-large"><\/i><\/button>\r\n <\/p>\r\n<\/form>\r\n<\/pre>\nB\u00e2y gi\u1edd ch\u00fang ta b\u1eaft \u0111\u1ea7u t\u1ea1o CSS cho form \u0111\u0103ng nh\u1eadp:<\/p>\n
\r\n.form {\r\n \/* Size & position *\/\r\n width: 300px;\r\n margin: 60px auto 30px;\r\n padding: 10px;\r\n position: relative; \/* For the submit button positioning *\/\r\n \r\n \/* Styles *\/\r\n box-shadow:\r\n 0 0 1px rgba(0, 0, 0, 0.3),\r\n 0 3px 7px rgba(0, 0, 0, 0.3),\r\n inset 0 1px rgba(255,255,255,1),\r\n inset 0 -3px 2px rgba(0,0,0,0.25);\r\n border-radius: 5px;\r\n background: linear-gradient(#eeefef, #ffffff 10%);\r\n}\r\n \r\n.form .field {\r\n position: relative; \/* For the icon positioning *\/\r\n}\r\n\r\n.form .field i {\r\n \/* Size and position *\/\r\n left: 0px;\r\n top: 0px;\r\n position: absolute;\r\n height: 36px;\r\n width: 36px;\r\n \r\n \/* Line *\/\r\n border-right: 1px solid rgba(0, 0, 0, 0.1);\r\n box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);\r\n \r\n \/* Styles *\/\r\n color: #777777;\r\n text-align: center;\r\n line-height: 42px;\r\n transition: all 0.3s ease-out;\r\n pointer-events: none;\r\n}\r\n<\/pre>\nT\u1ea1o input v\u00e0 button b\u1eb1ng css3<\/p>\n
\r\n.form input[type=text],\r\n.form input[type=password] {\r\n font-family: 'Lato', Calibri, Arial, sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n text-shadow: 0 1px 0 rgba(255,255,255,0.8);\r\n \r\n \/* Size and position *\/\r\n width: 100%;\r\n padding: 10px 18px 10px 45px;\r\n \r\n \/* Styles *\/\r\n border: none; \/* Remove the default border *\/\r\n box-shadow:\r\n inset 0 0 5px rgba(0,0,0,0.1),\r\n inset 0 3px 2px rgba(0,0,0,0.1);\r\n border-radius: 3px;\r\n background: #f9f9f9;\r\n color: #777;\r\n transition: color 0.3s ease-out;\r\n}\r\n \r\n.form input[type=text] {\r\n margin-bottom: 10px;\r\n}\r\n\r\n.form input[type=text]:hover ~ i,\r\n.form input[type=password]:hover ~ i {\r\n color: #52cfeb;\r\n}\r\n \r\n.form input[type=text]:focus ~ i,\r\n.form input[type=password]:focus ~ i {\r\n color: #42A2BC;\r\n}\r\n \r\n.form input[type=text]:focus,\r\n.form input[type=password]:focus,\r\n.form button[type=submit]:focus {\r\n outline: none;\r\n}\r\n\r\n.form .submit {\r\n \/* Size and position *\/\r\n width: 65px;\r\n height: 65px;\r\n position: absolute;\r\n top: 17px;\r\n right: -25px;\r\n padding: 10px;\r\n z-index: 2;\r\n \r\n \/* Styles *\/\r\n background: #ffffff;\r\n border-radius: 50%;\r\n box-shadow:\r\n 0 0 2px rgba(0,0,0,0.1),\r\n 0 3px 2px rgba(0,0,0,0.1),\r\n inset 0 -3px 2px rgba(0,0,0,0.2);\r\n}\r\n\r\n.form .submit:after {\r\n \/* Size and position *\/\r\n content: "";\r\n width: 10px;\r\n height: 10px;\r\n position: absolute;\r\n top: -2px;\r\n left: 30px;\r\n \r\n \/* Styles *\/\r\n background: #ffffff;\r\n \r\n \/* Other masks trick *\/\r\n box-shadow: 0 62px white, -32px 31px white;\r\n}\r\n\r\n.form button {\r\n \/* Size and position *\/\r\n width: 100%;\r\n height: 100%;\r\n margin-top: -1px;\r\n \r\n \/* Icon styles *\/\r\n font-size: 1.4em;\r\n line-height: 1.75;\r\n color: white;\r\n \r\n \/* Styles *\/\r\n border: none; \/* Remove the default border *\/\r\n border-radius: inherit;\r\n background: linear-gradient(#52cfeb, #42A2BC);\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,0.3),\r\n 0 1px 2px rgba(0,0,0,0.35),\r\n inset 0 3px 2px rgba(255,255,255,0.2),\r\n inset 0 -3px 2px rgba(0,0,0,0.1);\r\n \r\n cursor: pointer;\r\n}\r\n<\/pre>\nCu\u1ed1i c\u00f9ng, ch\u00fang ta t\u1ea1o hi\u1ec7u \u1ee9ng hover v\u00e0 focus:<\/p>\n
\r\n.form button:hover,\r\n.form button[type=submit]:focus {\r\n background: #52cfeb;\r\n transition: all 0.3s ease-out;\r\n}\r\n \r\n.form button:active {\r\n background: #42A2BC;\r\n box-shadow:\r\n inset 0 0 5px rgba(0,0,0,0.3),\r\n inset 0 3px 4px rgba(0,0,0,0.3);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Ch\u00e0o c\u00e1c b\u1ea1n, trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y ch\u00fang t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n t\u1ea1o m\u1ed9t form \u0111\u0103ng nh\u1eadp […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145],"tags":[],"class_list":["post-2097","post","type-post","status-publish","format-standard","hentry","category-html-css"],"views":538,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/2097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=2097"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/2097\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=2097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=2097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=2097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}