Cara Membuat Glowing Border Input

Salam hangat teman-teman, semoga teman-teman sehat selalu ya,
Kali ini saya akan mencoba membagi Cara Membuat Glowing Border Input.

Pasti teman-teman ingin tampilan web teman-teman lebih menarik dengan menyisipkan animasi-animasi pada web.

Nah supaya web teman-teman lebih menarik saya akan memberikan contoh Cara Membuat Glowing Border Input.

– Pertama teman-teman ketikan tag html seperti gambar di bawah ini

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <form action="#" method="post">
    <div>
      <label for="name">Text Input</label>
      <input type="text" name="name" id="name" value="" tabindex="1">
    </div>
    <div>
      <label for="textarea">Textarea</label>
      <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>  
  </form>
</body>
</html>

– Kedua teman-teman ketikan css di bawah ini dan save dengan nama style.css.

label {
	width: 150px;
	float: left;
}

body{
	padding: 20px;
}

input[type=text], textarea{
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	outline: none;
	padding: 3px 0 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid #dddddd;
}

input[type=text]:focus, textarea:focus{
	-moz-box-shadow: 0 0 5px #F01A12;
	-webkit-box-shadow: 0 0 5px #F01A12;
	box-shadow: 0 0 5px #F01A12;
	padding: 3px 0 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid #F01A12;
}

– Hasilnya akan menjadi seperti ini.

Bagaimana teman-teman mudahkan.
Sekian artikel saya hari ini tentang Cara Membuat Glowing Border Input.

Sehat selalu ya teman-teman, selamat mencoba.

Kategori