css实现拟态化设计登录注册表单输入效果代码-html代码-BFW代码库

css实现拟态化设计登录注册表单输入效果代码

代码语言：html

代码描述：css实现拟态化设计登录注册表单输入效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:500,700&amp;display=swap'>
<style>
    body,html {
	background-color:#EBECF0;
}
body,p,input,select,textarea,button {
	font-family:'Montserrat',sans-serif;
	letter-spacing:-0.2px;
	font-size:16px;
}
div,p {
	color:#BABECC;
	text-shadow:1px 1px 1px #FFF;
}
form {
	padding:16px;
	width:320px;
	margin:0 auto;
}
.segment {
	padding:32px 0;
	text-align:center;
}
button,input {
	border:0;
	outline:0;
	font-size:16px;
	border-radius:320px;
	padding:16px;
	background-color:#EBECF0;
	text-shadow:1px 1px 0 #FFF;
}
label {
	display:block;
	margin-bottom:24px;
	width:100%;
}
input {
	margin-right:8px;
	box-shadow:inset 2px 2px 5px #BABECC,inset -5px -5px 10px #FFF;
	width:100%;
	box-sizing:border-box;
	transition:all 0.2s ease-in-out;
	appearance:none;
	-webkit-appearance:none;
}
input:focus {
	box-shadow:inset 1px 1px 2px #BABECC,inset -1px -1px 2px #FFF;
}
button {
	color:#61677C;
	font-weight:bold;
	box-shadow:-5px -5px 20px #FFF,5px 5px 20px #BABECC;
	transition:all 0.2s ease-in-out;
	cursor:pointer;
	font-weight:600;
}
button:hover {
	box-shadow:-2px -2px 5px #FFF,2px 2px 5px #BABECC;
}
button:active {
	box-shadow:inset 1px 1px 2px #BABECC,inset -1px -1px 2px #FFF;
}
button .icon {
	margin-right:8px;
}
button.unit {
	border-radius:8px;
	line-height:0;
	width:48px;
	height:48px;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	margin.........完整代码请登录后点击上方下载按钮下载查看