Skeuomorf表单原生简洁布局效果-html代码-BFW代码库

代码语言：html

代码描述：Skeuomorf表单原生简洁布局效果

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


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


<style>
body { 
	padding: 40px;
	background-color: var(--color-bg-default); 
}

h2 { 
	font-size: 28px; 
	font-weight: bold;
	margin: 3em 0 2em;
}

.theme_space_neoskeuo {
	--space-3xs: 2px;
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-s: 12px;
	--space-m: 16px;
	--space-l: 20px;
	--space-xl: 24px;
	--space-2xl: 32px;
	--space-3xl: 40px;
	--space-4xl: 48px;
	--space-5xl: 72px;
	--space-6xl: 96px;
}

.theme { 
	--radius-default: 16px;
	--radius-s: 12px;
	--radius-xs: 6px;
}

.theme_font_neoskeuo {
	--font-primary: 'Montserrat', 'Helvetica', 'Helvetica Neue', 'Segoe UI', 'Arial', sans-serif;
	--font-digital: 'Digital', monospace;
	
	font-family: var(--font-primary);
}

.theme_color_neoskeuo {
	
	--color-bg-default: rgba(238,240,245,1);
	
	--color-typo-primary: rgba(48,52,84, 1);
	--color-typo-link: rgba(0, 80, 220, 1);
	
	--color-control-bg-default: rgba(240,242,247,1);
	--color-control-bg-action: hsla(220, 100%, 54%, 1);
	
	--color-shadow: 12,13,18;
	--color-light: 255, 255, 255;
	--color-glow: 0,150,255;
}

.button {
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
	padding: var(--space-xl) var(--space-4xl);
	font-size: 18px;
	font-family: var(--font-primary);
	color: var(--color-typo-primary);
	border: none;
	border-radius: var(--radius-default);
	background-color: var(--color-bg-default);
	cursor: pointer;
	outline: none;
	text-shadow: 
		0 -1px 0 rgba( var(--color-shadow), 0.08 ),
		0 1px 0 rgba( var(--color-light), 1 );
	box-shadow: 
		inset 1px 1px 1px rgba( var(--color-light), 1 ),
		-2px -2px 2px rgba( var(--color-light), 0.9),
		-4px -4px 6px rgba( var(--color-light), 0.9),
		-8px -8px 16px rgba( var(--color-light), 0.9),
		-12px -12px 24px rgba( var(--color-light), 0.9),
		inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
		2px 2px 2px rgba( var(--color-shadow), 0.08),
		4px 4px 6px rgba( var(--color-shadow), 0.08),
		8px 8px 16px rgba( var(--color-shadow), 0.08),
		12px 12px 24px rgba( var(--color-shadow), 0.08);
	-webkit-transition: 
		color 0.3s,
		text-shadow 0.3s,
		box-shadow 0.6s;
	transition: 
		color 0.3s,
		text-shadow 0.3s,
		box-shadow 0.6s;
/* 	&:active {
		box-shadow: 
			inset -1px -1px 1px rgba( var(--color-light), 1 ),
			3px 3px 3px rgba( var(--color-light), 1),
			5px 5px 6px rgba( var(--color-light), 1),
			10px 10px 16px rgba( var(--color-light), 1),
			14px 14px 24px rgba( var(--color-light), 1),
			inset 1px 1px 1px rgba( var(--color-shadow), 0.06 ),
			-3px -3px 3px rgba( var(--color-shadow), 0.085),
			-5px -5px 6px rgba( var(--color-shadow), 0.085),
			-10px -10px 16px rgba( var(--color-shadow), 0.085),
			-14px -14px 24px rgba( var(--color-shadow), 0.085);
	} */
}

.button:hover {
		color: var(--color-typo-link);
		text-shadow: 
			0 -1px 0 rgba( var(--color-shadow), 0.08 ),
			0 1px 0 rgba( var(--color-light), 1 ),
			0 0 1px rgba( var(--color-light), 0.7 ),
			0 0 4px rgba( var(--color-glow), 0.08 ),
			0 0 8px rgba( var(--color-glow), 0.08 );
		box-shadow: 
			inset 1px 1px 1px rgba( var(--color-light), 1 ),
			-3px -3px 3px rgba( var(--color-light), 1),
			-5px -5px 6px rgba( var(--color-light), 1),
			-10px -10px 16px rgba( var(--color-light), 1),
			-14px -14px 24px rgba( var(--color-light), 1),
			inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
			3px 3px 3px rgba( var(--color-shadow), 0.085),
			5px 5px 6px rgba( var(--color-shadow), 0.085),
			10px 10px 16px rgba( var(--color-shadow), 0.085),
			14px 14px 24px rgba( var(--color-shadow), 0.085);
	}

/* 	&:active {
		box-shadow: 
			inset 1px 1px 1px rgba( var(--color-light), 1 ),
			inset 0px 0px 0 6px var(--color-bg-default),
			inset -5px -5px 6px 6px rgba( var(--color-light), 1 ),
			-3px -3px 3px rgba( var(--color-light), 1),
			-5px -5px 6px rgba( var(--color-light), 1),
			-10px -10px 16px rgba( var(--color-light), 1),
			-14px -14px 24px rgba( var(--color-light), 1),
			inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
			inset 3px 3px 3px 6px rgba( var(--color-shadow), 0.085 ),
			inset 5px 5px 6px 6px.........完整代码请登录后点击上方下载按钮下载查看