CSS3 制作漂亮的登录表单

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html lang="en-US">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>CSS3 制作登录表单</title>
<style type="text/css">
body,ul{ 
	margin: 0; 
	padding: 0
}
a {
	color: rgb(1, 124, 185);
	text-decoration: none;
}
input:focus {
	outline: none 0;
}
body{ 
	color: #b5b5b5; 
	font: 14px 'Arial';
}
body,
li:first-child:after,
li:last-child:after{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1M0FFQkYzNUQxMDhFMTExOTE4RkZGQzZFRDFGQzVERiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQjQwMjc0QzAxOUExMUUyODZDQkIxMEQ5NzkxOTVBMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQjQwMjc0QjAxOUExMUUyODZDQkIxMEQ5NzkxOTVBMyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2ODAxMTc0MDcyMDY4MTE4MDhFRjlFRDlENzM3MkZGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUzQUVCRjM1RDEwOEUxMTE5MThGRkZDNkVEMUZDNURGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+fQT+8AAAABdJREFUeNpiNDQ0ZGNjYwJiBgYGgAADAAgKALs+1LCNAAAAAElFTkSuQmCC);
}
.box{ 
	position: relative; 
	width: 384px; 
	height: 140px; 
	margin: 50px auto;
}
.box li{ 
	list-style-type: none; 
	margin-bottom: 10px; 
	border-radius: 5px; 
	overflow: hidden; 
	position: relative; 
	height: 42px;
}
.box li input{
	box-shadow:inset 0 0 5px rgba(0,0,0,.5),-1px 1px 0 rgba(255,255,255,.05); 
	border:0 none; 
	padding:8px 5px 5px;  
	border-radius: 5px; 
	width:300px;  
	height: 28px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	background: rgba(0,0,0,.1); 
	color: #fff;
}

.box li:first-child:after,
.box li:last-child:after{ 
	position: absolute;
	width: 50px; 
	height: 50px; 
	content: ""; 
	border-radius: 25px;
	z-index: 2; 
	right: -23px;
	box-shadow: 0 0 8px rgba(0,0,0,.5);
}
::-webkit-input-placeholder { 
	color:#fff; 
	font-weight: bold;
}
.box li:first-child:after{
	top: 15px;
}
.box li:last-child:after{
	bottom:15px;
}
.box label{ 
	width: 70px; 
	display: inline-block; 
	text-align: right;
}
.box span{ 
	display: block; 
	color: #6296b4; 
	padding-left: 75px;
}
.button{ 
	position: absolute; 
	top: 24px; 
	right: -30px; 
	width: 44px; 
	height: 44px; 
	border-radius: 22px; 
	border:1px solid #00a1d2; 
	background: -webkit-linear-gradient(top,#029ecd,#0d7796); 
	color: #fff; 
	text-shadow:1px 1px 0 #666; 
	box-shadow:0 0 0 5px #2c2c2c; 
	z-index: 3; 
	text-align: center; 
	line-height: 46px;
	-webkit-transition: all 0.28s ease-in;
	-moz--transition: all 0.28s ease-in;
}
.button:hover{ 
	-webkit-transform:rotate(90deg); 
}
@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot');
  src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
url('font/fontawesome-webfont.woff') format('woff'), 
url('font/fontawesome-webfont.ttf') format('truetype'), 
url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icon-arrow-right:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 26px;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  content: "\f061";
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS3 制作登录表单</h1>
<div class="box">
	 <form action="#" method="get">
	 	<ul>
			 <li>	
			 	<label for="username">Email:</label> <input type="text" id="username"  class="username" placeholder="john.smith@strategysoft.com"/>
			 </li>
			 <li>
			 	<label for="password">Password:</label> <input type="password" id="password" class="password" placeholder="******"/>
			 </li>
		</ul>
			<a href="javascript:;" class="button"/><i class="icon-arrow-right"></i></a>
	 </form>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3 制作漂亮的登录表单

分类

表单按钮

描述

CSS3 制作登录表单，主要是想表达CSS3的功能应用，并不是突出表单。因此表单可能会是很简单的应用，但足以可表达CSS3功能的强大和新颖。本站有话多的CSS3实例，都是挺实用的，请浏览“<a href="http://www.codefans.net/jscss/sort/list_...