日本最新免费不卡二区在线,久久久青草青青亚洲国产免观,国产精品小电影

技術(shù)頻道 - html技術(shù)

帶有浮動占位符(Placeholder)和光亮按鈕的登錄表單

作者:admin 時間:2021-9-1 19:38:3 瀏覽:

在表單里加上浮動占位符(Placeholder)，不但可以使表單設(shè)計更加靈活，在用戶使用體驗上也得以提高，因此，這樣的表單設(shè)計越來越多人使用了。本文就給大家介紹一個帶有浮動占位符(Placeholder)和光亮按鈕的登錄表單。

帶有浮動占位符(Placeholder)和光亮按鈕的登錄表單

實例簡介

這是一個登陸表單，有Username和Password兩個字段，另外還有兩個按鈕。

默認(rèn)狀態(tài)下，兩個輸入框上顯示“Username”和“Password”的字體，當(dāng)鼠標(biāo)點擊輸入框時，字體并沒有消失，而是移到輸入框的上方。

當(dāng)鼠標(biāo)移到按鈕上時，按鈕立即發(fā)光，這是一個鼠標(biāo)懸停效果。

實例代碼

該實例是純CSS實現(xiàn)，沒有用到Javascript程序或其他外部文件引用。

CSS

下面是輸入框的CSS樣式代碼。

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

~ label { ... } 是鼠標(biāo)點擊輸入框時的占位符位置變化。

以下是按鈕的CSS代碼

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px;
  border-radius: 5px;
}

.login-box a {
  width: auto;
  margin-left:30px;
  height: 25px;
  background: linear-gradient(360deg, transparent, #03e9f4);
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}

a:hover { ... } 里的 box-shadow 是發(fā)光效果代碼。

HTML

<form>
  <div class="user-box">
    <input type="text" name="" required="">
    <label>Username</label>
  </div>
  <div class="user-box">
    <input type="password" name="" required="">
    <label>Password</label>
  </div>
  <a href="#">
    Submit
  </a>
  <a href="#">
    Reset
  </a>
</form>

user-box 是輸入框所在的div的類名。<label> 是占位符標(biāo)簽。

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>css login form and light button</title>

  <style>
html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #243b55);
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px;
  border-radius: 5px;
}

.login-box a {
  width: auto;
  margin-left:30px;
  height: 25px;
  background: linear-gradient(360deg, transparent, #03e9f4);
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}




  </style>

  
</head>

<body>
  <div class="login-box">
  <h2>Login</h2>
  <form>
    <div class="user-box">
      <input type="text" name="" required="">
      <label>Username</label>
    </div>
    <div class="user-box">
      <input type="password" name="" required="">
      <label>Password</label>
    </div>
    <a href="#">
      Submit
    </a>
    <a href="#">
       Reset
    </a>
  </form>
</div>
  
</body>

</html>