{"id":4154,"date":"2023-03-09T03:39:36","date_gmt":"2023-03-09T03:39:36","guid":{"rendered":"https:\/\/studiotechx.com\/projects\/?p=4154"},"modified":"2023-03-09T03:45:24","modified_gmt":"2023-03-09T03:45:24","slug":"login-form-with-light-button","status":"publish","type":"post","link":"https:\/\/studiotechx.com\/projects\/login-form-with-light-button\/","title":{"rendered":"Login Form with Light Button"},"content":{"rendered":"\n

index.html<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Test<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n\n<body>\n  \n<div class=\"login-box\">\n  <h2>Login<\/h2>\n  <form>\n    <div class=\"user-box\">\n      <input type=\"text\" name=\"\" required=\"\">\n      <label>Username<\/label>\n    <\/div>\n    <div class=\"user-box\">\n      <input type=\"password\" name=\"\" required=\"\">\n      <label>Password<\/label>\n    <\/div>\n    <a href=\"#\">\n      <span><\/span>\n      <span><\/span>\n      <span><\/span>\n      <span><\/span>\n      Submit\n    <\/a>\n  <\/form>\n<\/div>\n  <\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
style.css<\/strong><\/p>\n\n\n\n
html {\n  height: 100%;\n}\nbody {\n  margin:0;\n  padding:0;\n  font-family: sans-serif;\n  background: linear-gradient(#141e30, #243b55);\n}\n\n.login-box {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 400px;\n  padding: 40px;\n  transform: translate(-50%, -50%);\n  background: rgba(0,0,0,.5);\n  box-sizing: border-box;\n  box-shadow: 0 15px 25px rgba(0,0,0,.6);\n  border-radius: 10px;\n}\n\n.login-box h2 {\n  margin: 0 0 30px;\n  padding: 0;\n  color: #fff;\n  text-align: center;\n}\n\n.login-box .user-box {\n  position: relative;\n}\n\n.login-box .user-box input {\n  width: 100%;\n  padding: 10px 0;\n  font-size: 16px;\n  color: #fff;\n  margin-bottom: 30px;\n  border: none;\n  border-bottom: 1px solid #fff;\n  outline: none;\n  background: transparent;\n}\n.login-box .user-box label {\n  position: absolute;\n  top:0;\n  left: 0;\n  padding: 10px 0;\n  font-size: 16px;\n  color: #fff;\n  pointer-events: none;\n  transition: .5s;\n}\n\n.login-box .user-box input:focus ~ label,\n.login-box .user-box input:valid ~ label {\n  top: -20px;\n  left: 0;\n  color: #03e9f4;\n  font-size: 12px;\n}\n\n.login-box form a {\n  position: relative;\n  display: inline-block;\n  padding: 10px 20px;\n  color: #03e9f4;\n  font-size: 16px;\n  text-decoration: none;\n  text-transform: uppercase;\n  overflow: hidden;\n  transition: .5s;\n  margin-top: 40px;\n  letter-spacing: 4px\n}\n\n.login-box a:hover {\n  background: #03e9f4;\n  color: #fff;\n  border-radius: 5px;\n  box-shadow: 0 0 5px #03e9f4,\n              0 0 25px #03e9f4,\n              0 0 50px #03e9f4,\n              0 0 100px #03e9f4;\n}\n\n.login-box a span {\n  position: absolute;\n  display: block;\n}\n\n.login-box a span:nth-child(1) {\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, #03e9f4);\n  animation: btn-anim1 1s linear infinite;\n}\n\n@keyframes btn-anim1 {\n  0% {\n    left: -100%;\n  }\n  50%,100% {\n    left: 100%;\n  }\n}\n\n.login-box a span:nth-child(2) {\n  top: -100%;\n  right: 0;\n  width: 2px;\n  height: 100%;\n  background: linear-gradient(180deg, transparent, #03e9f4);\n  animation: btn-anim2 1s linear infinite;\n  animation-delay: .25s\n}\n\n@keyframes btn-anim2 {\n  0% {\n    top: -100%;\n  }\n  50%,100% {\n    top: 100%;\n  }\n}\n\n.login-box a span:nth-child(3) {\n  bottom: 0;\n  right: -100%;\n  width: 100%;\n  height: 2px;\n  background: linear-gradient(270deg, transparent, #03e9f4);\n  animation: btn-anim3 1s linear infinite;\n  animation-delay: .5s\n}\n\n@keyframes btn-anim3 {\n  0% {\n    right: -100%;\n  }\n  50%,100% {\n    right: 100%;\n  }\n}\n\n.login-box a span:nth-child(4) {\n  bottom: -100%;\n  left: 0;\n  width: 2px;\n  height: 100%;\n  background: linear-gradient(360deg, transparent, #03e9f4);\n  animation: btn-anim4 1s linear infinite;\n  animation-delay: .75s\n}\n\n@keyframes btn-anim4 {\n  0% {\n    bottom: -100%;\n  }\n  50%,100% {\n    bottom: 100%;\n  }\n}<\/code><\/pre>\n\n\n\n
\n
Download the source code<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"index.html style.css\n","protected":false},"author":1,"featured_media":4155,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":"","csco_singular_sidebar":"","csco_page_header_type":"","csco_appearance_grid":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_location_hash":"","csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0},"categories":[21],"tags":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/studiotechx.com\/projects\/wp-content\/uploads\/2023\/03\/login.png","_links":{"self":[{"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/posts\/4154"}],"collection":[{"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/comments?post=4154"}],"version-history":[{"count":2,"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/posts\/4154\/revisions"}],"predecessor-version":[{"id":4159,"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/posts\/4154\/revisions\/4159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/media\/4155"}],"wp:attachment":[{"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/media?parent=4154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/categories?post=4154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studiotechx.com\/projects\/wp-json\/wp\/v2\/tags?post=4154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}