表单登录css样式_使用CSS3简化一个光滑的登录表单

最新推荐文章于 2024-04-16 22:49:44 发布

daique1908

最新推荐文章于 2024-04-16 22:49:44 发布

阅读量2.1k

点赞数

文章标签： html python css js java ViewUI

表单登录css样式

让我们使用基本HTML5创建一个最小巧的登录表单，然后使用一些CSS3技术对其进行增强。是时候将一些简单的元素变成美丽的东西了。

寻找捷径？

如果您想为自己的网站提供一些漂亮CSS3表单，并且不想自己创建它们，那么Envato Market上的CSS3 Form Pack不会出错。仅需$ 5，您即可：

33种登录表单样式
66种搜索表单样式
12种联系表单样式
具有文本框，文本区域，单选按钮，复选框，选择框样式的一般形式
每种形式的各种颜色样式

难怪它是Envato市场上最畅销CSS3表单项之一。

介绍

Web表单是网站设计不可或缺的一部分。无论目的如何，表单都旨在成为用户输入值和提交数据的简单方法。有了HTML5和CSS3，我们可以创建直观易用且外观吸引人的表单。

该设计

我认为网页设计应该干净高效。我们将要编码的表单设计遵循这些原则，仅包括三个元素：用户名输入，密码输入和提交输入。由于标记非常简单，因此当我们将标记编码为HTML和CSS时，它可以提供更大的灵活性。

这是设计中我们需要记住的一些元素：

渐变色
内心的阴影
不透明边界
文字阴影
占位符文字

大多数元素都是CSS样式，但是我们也会检查placeholder属性，因为这将向我们的用户建议他们应该输入哪种数据。

步骤1：基础HTML和CSS结构

让我们首先创建一个带有表单和三个输入的干净HTML5模板：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>slick Login</title>
	<meta name="description" content="slick Login">
	<meta name="author" content="Webdesigntuts+">
</head>

<body>
	<form>
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="Log In">
	</form>
</body>
	
</html>

现在，我们没有什么特别之处，只有一个表格，三个输入和一个空白文档。让我们创建一个名为style.cssCSS文件，并将其链接回我们HTML页面：

<link rel="stylesheet" type="text/css" href="style.css" />

请记住，CSS文件当前位于我们的主目录中。如果选择将CSS文件放在另一个文件夹（例如文件夹'css'）中 ，请确保使用正确的路径。

在将自己的样式添加到CSS文件之前，从干净的表盘开始一直是一个好习惯。我们将从Eric Meyer的CSS Reset开始样式，该样式会删除默认样式，并允许我们在任何浏览器中从同一点构建规则。

让我们从为登录页面定义字体和背景渐变开始。在CSS重置后插入以下代码：

body {
	font-family: sans-serif;
	
	background-color: #323B55;
	background-image: -webkit-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -moz-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -o-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -ms-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: linear-gradient(bottom, #323B55 0%, #424F71 100%);
}

现在，我们已经添加了这段代码，页面现在应该具有很酷的线性渐变背景。渐变从颜色为＃323B55的页面底部（0％）开始，到颜色为＃424F71的页面顶部（100％）结束。万一从不支持渐变的浏览器查看页面，则声明一个background-color至关重要，我将它设置为与渐变相同的颜色（0％）。 CSS3渐变的妙处在于您可以添加许多“色标”，例如，另一种颜色更改为25％。在body标签中添加的最后一件事是font-family ，我决定使用Sans Serif类型。

现在我们有了基础，是时候开始添加更多样式了！

步骤2：设置登录表单的样式

在为登录表单启动CSS样式之前，我们需要向HTML文档中添加一些内容。首先，首先在表单中添加一个id ，我们将其称为'slick-login' 。接下来，在每个输入标签中添加一个placeholder属性。到目前为止，这是HTML页面的外观：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>slick Login</title>
	<meta name="description" content="slick Login">
	<meta name="author" content="Webdesigntuts+">
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<form id="slick-login">
		<input type="text" name="username" placeholder="me@tutsplus.com">
		<input type="password" name="password" placeholder="password">
		<input type="submit" value="Log In">
	</form>
</body>

</html>

HTML5输入占位符属性是对输入标签的重要补充。代替使用用户必须替换的输入值， placeholder属性使我们可以显示帮助文本，并在用户开始在字段中键入内容后消失。它尚未得到广泛支持，因此应谨慎使用。举例来说， placeholder属性在浏览器中不起作用，用户将不知道要输入什么值。稍后我们将介绍一种后备技术，但是占位符文本应作为建议而不是标记输入也不是一文不值。

现在我们有了更新HTML页面，我们可以开始在登录表单中添加一些样式了。这是我们之前声明的表单idCSS。

#slick-login {
	width: 220px;
	height: 155px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -110px;
	margin-top: -75px;
}

对于此登录表单，我决定将其在页面中心完美地（水平和垂直）对齐。定位这样的元素非常简单。从上面的代码中可以看到，将元素从顶部和左侧放置50％，然后使用边距值将元素的宽度和高度推回一半。这是一种在页面中心对齐元素的好方法，但是在灵活性方面并不是那么好。例如，如果要复制元素，则必须更改宽度，高度和边距值，以保持元素对齐。即使我将表单对齐在页面中心，也可以随时将代码更改为所需的代码！

现在我们已经对齐了表单，是时候继续对输入进行样式设置了！

步骤3：设置输入样式

现在，我们真的很有趣。首先，为文本和密码输入添加CSS：

#slick-login input[type="text"],#slick-login input[type="password"] {
	width: 100%;
	height: 40px;
	positon: relative;
	margin-top: 7px;
	font-size: 14px;
	color: #444;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);

	padding-left: 20px;
	
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 6px;

	background-color: #fff;
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);

	-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
	box-shadow: inset 0px 2px 0px #d9d9d9;

}

#slick-login input[type="text"]:focus,#slick-login input[type="password"]:focus {
	-webkit-box-shadow: inset 0px 2px 0px #a7a7a7;
	box-shadow: inset 0px 2px 0px #a7a7a7;
}

#slick-login input:first-child {
	margin-top: 0px;
}

请记住，我们的目标是使表格具有灵活性。我没有声明固定的输入宽度，而是决定了相对于表单宽度的宽度。这样，如果我们决定更改表单的宽度，则所有输入将相应地更改。

因为我们声明了所有输入的margin-top值，所以我们需要添加first-child选择器，并确保第一个输入的margin-top设置为零。这样，第一个输入值将始终位于表单的顶部。

要记住的另一件事是将outline属性设置为none，以便浏览器不会在我们的输入中添加任何不需要的轮廓。

透明边框

为了使表单更加灵活，我们将添加透明边框，以便无论网站有什么背景，表单都将更改以适合它。由于opacity属性会更改整个元素的不透明度，因此我决定搜索一种仅更改边框不透明度的方法。
如果在rgba中声明边框颜色，则可以添加一个alpha值。如上所示，我们的边框是一个1像素的黑色实心边框，但其不透明度为47％。

填充问题

在我们的设计中，字段中的文本向右移动。要在CSS中实现此效果，我们可以简单地使用padding-left属性并将其设置为20px。当我们渲染代码时，就会出现问题。填充值将20像素添加到输入宽度，这不是我们想要的。

为了解决这个问题，我们可以添加一个background-clip属性，并将其值设置为padding-box。这个CSS片段确保了填充不会影响输入的宽度。您可以在Mozilla上了解有关background-clip属性的更多信息。

添加内在阴影

另一个非常酷CSS3属性是box-shadow 。使用inset参数可让我们在输入元素上创建内部阴影。使用focus选择器，我们可以轻松地在用户单击字段时更改周围的值和颜色。

步骤4：样式化Submit按钮

提交按钮是表单中非常重要的部分，因此让我们脱颖而出！这是我们将用于提交输入CSS：

#slick-login input[type="submit"] {
	width: 100%;
	height: 50px;
	margin-top: 7px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 0px -1px 0px #5b6ddc;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 6px;

	background-color: #5466da;
	background-image: -webkit-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -moz-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -o-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -ms-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: linear-gradient(bottom, #5466da 0%, #768ee4 100%);

	cursor: pointer;
	
	-webkit-box-shadow: inset 0px 1px 0px #9ab1ec;
	box-shadow: inset 0px 1px 0px #9ab1ec;

}

#slick-login input[type="submit"]:hover {
	background-color: #5f73e9;
	background-image: -webkit-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -moz-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -o-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -ms-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: linear-gradient(bottom, #5f73e9 0%, #859bef 100%);

	-webkit-box-shadow: inset 0px 1px 0px #aab9f4;
	box-shadow: inset 0px 1px 0px #aab9f4;
	
	margin-top: 10px;
}

#slick-login input[type="submit"]:active {
	background-color: #7588e1;
	background-image: -webkit-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -moz-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -o-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -ms-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: linear-gradient(bottom, #7588e1 0%, #7184df 100%);

	-webkit-box-shadow: inset 0px 1px 0px #93a9e9;
	box-shadow: inset 0px 1px 0px #93a9e9;
}

我们提交按钮CSS非常简单。我们使用边框，渐变和内部阴影使按钮突出。我们要查看的另一个CSS3属性是text-shadow 。

为了使按钮文字更加突出，我们将在文字上方添加一个1px的纯阴影。使用较深的颜色（＃5b6ddc），我们可以使白色文本在浅蓝色背景下更加突出。即使是最微妙的效果（例如添加文本阴影）也可以为您的设计添加很多东西，从而使文本脱颖而出。

我继续并添加了hover和active选择器的代码。所更改的只是渐变的颜色和内部阴影。注意颜色的变化是多么微妙，但它为设计增加了很多。在悬停状态下，我还将margin-top的值更改为低三个像素。变化感觉自然，并增加了外观的优雅度。

到目前为止，一切看起来都很不错，但是如果您将鼠标悬停并单击某些元素，则似乎有点断断续续。是时候添加一些动画了！

步骤5：向元素添加过渡

为了使事情变得更好，让我们在输入中添加以下CSS代码：

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;

通过快速简单的过渡，我们所有的元素在外观和感觉上都会好很多。注意文本输入中内部阴影颜色的过渡以及悬停时提交按钮动画的过渡；过渡使表格看起来很完整。

尽管一切看起来都不错，但让我们在每天称呼之前再添加一些其他东西。

步骤6：添加标签

为了确保我们的表单可以正确访问，请在您的input标签旁边添加以下标记：

<label for="username">username</label>
<label for="password">password</label>

因为我们希望使表单尽可能简单，所以我们决定使用placeholder属性。另一种可行的方法是添加label标签。因为我们不需要设计中的标签，而是出于可访问性和SEO的目的，所以我们将在以下代码中添加此CSS代码：

#slick-login label {
	display: none;
}

将display属性设置为none可以实现我们想要的外观，在这种情况下，根本就不是外观！

步骤7：跨浏览器兼容性

现在，让我们回到使用placeholder属性时可能遇到的问题。假设某人正在通过不支持placeholder的浏览器查看此网站：我们的空白输入将毫无帮助。为了解决这个问题，我们将使用jQuery和Modernizr来检测支持并纠正不存在的情况。首先，让我们将脚本链接到我们HTML页面。

将脚本标签放在HTML的<head>中。为了获得最佳性能，您应该让它们遵循样式表引用。我们建议将Modernizr放在首位的原因有两个：HTML5 Shiv（在IE中启用HTML5元素）必须在<body>之前执行-Modernizr

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

现在，创建一个名为placeholder.js的新JavaScript文件。独特方法具有使用Modernizr为placeholder属性创建后备的好方法。将此代码添加到javascript文件中：

$(function()
{
    // check placeholder browser support
    if (!Modernizr.input.placeholder)
    {
         // set placeholder values
        $(this).find('[placeholder]').each(function()
        {
            if ($(this).val() == '') // if field is empty
            {
                $(this).val( $(this).attr('placeholder') );
            }
        });
         // focus and blur of placeholders
        $('[placeholder]').focus(function()
        {
            if ($(this).val() == $(this).attr('placeholder'))
            {
                $(this).val('');
                $(this).removeClass('placeholder');
            }
        }).blur(function()
        {
            if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))
            {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
        });
         // remove placeholders on submit
        $('[placeholder]').closest('form').submit(function()
        {
            $(this).find('[placeholder]').each(function()
            {
                if ($(this).val() == $(this).attr('placeholder'))
                {
                    $(this).val('');
                }
            })
        });
     }
});

我们还将把javascript文件链接到我们HTML页面：

<script type="text/javascript" src="placeholder.js"></script>

为了完成这项工作，我们需要在字段输入中添加一个placeholder类：

<input type="text" name="username" class="placeholder" placeholder="me@tutsplus.com">
<input type="password" name="password" class="placeholder" placeholder="password">

现在，让我们在CSS文件中添加placeholder类的样式：

.placeholder {
    color: #444;
}

在我们讨论它的同时，我们还添加了一个有用CSS代码段，该代码段可确保输入的宽度保持相同，而不考虑填充和边框：

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

对于为何更多信息box-sizing是如此之大，保罗爱尔兰有一个很好的解释。

步骤8：添加简单的动画

为了使我们的表单更加精美，当页面加载时，我们将向表单添加一个简单的上升动画。让我们从声明动画和添加关键帧开始：

@keyframes "login" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
   	margin-top: -50px;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
   	margin-top: -75px;
 }

}

@-moz-keyframes login {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-webkit-keyframes "login" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-ms-keyframes "login" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-o-keyframes "login" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

上面CSS声明了一个名为login的新动画，并更改了margin-top和opacity值，以便该表格淡入并升入位置。现在，让我们在CSS中添加slick-login ID：

-webkit-animation: login 1s ease-in-out;
	-moz-animation: login 1s ease-in-out;
	-ms-animation: login 1s ease-in-out;
	-o-animation: login 1s ease-in-out;
	animation: login 1s ease-in-out;

现在，每次页面加载时，将执行一秒钟的动画。现在我们已经设置了样式，固定和动画，我们完成了！

最终HTML和CSS

下面是这种精美的登录表单的最终HTML：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Slick Login</title>
	<meta name="description" content="slick Login">
	<meta name="author" content="Webdesigntuts+">
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
	<script type="text/javascript" src="placeholder.js"></script>
</head>

<body>
	<form id="slick-login">
		<label for="username">username</label><input type="text" name="username" class="placeholder" placeholder="me@tutsplus.com">
		<label for="password">password</label><input type="password" name="password" class="placeholder" placeholder="password">
		<input type="submit" value="Log In">
	</form>
</body>

</html>

和CSS：

/*
CSS RESET
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License:  none (public domain)
 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

body {
	line-height: 1;
}

ol,ul {
	list-style: none;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS Animations */
@keyframes "login" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
   	margin-top: -50px;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
   	margin-top: -75px;
 }

}

@-moz-keyframes login {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-webkit-keyframes "login" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-ms-keyframes "login" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-o-keyframes "login" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

/* Main CSS */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
	font-family: sans-serif;
	
	background-color: #323B55;
	background-image: -webkit-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -moz-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -o-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -ms-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: linear-gradient(bottom, #323B55 0%, #424F71 100%);
}

#slick-login {
	width: 220px;
	height: 155px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -110px;
	margin-top: -75px;

	-webkit-animation: login 1s ease-in-out;
	-moz-animation: login 1s ease-in-out;
	-ms-animation: login 1s ease-in-out;
	-o-animation: login 1s ease-in-out;
	animation: login 1s ease-in-out;
}

#slick-login label {
	display: none;
}

.placeholder {
    color: #444;
}

#slick-login input[type="text"],#slick-login input[type="password"] {
	width: 100%;
	height: 40px;
	positon: relative;
	margin-top: 7px;
	font-size: 14px;
	color: #444;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);

	padding-left: 20px;
	
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 6px;

	background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);

	-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
	box-shadow: inset 0px 2px 0px #d9d9d9;

	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

#slick-login input[type="text"]:focus,#slick-login input[type="password"]:focus {
	-webkit-box-shadow: inset 0px 2px 0px #a7a7a7;
	box-shadow: inset 0px 2px 0px #a7a7a7;
}

#slick-login input:first-child {
	margin-top: 0px;
}

#slick-login input[type="submit"] {
	width: 100%;
	height: 50px;
	margin-top: 7px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 0px -1px 0px #5b6ddc;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 6px;

	background-color: #5466da;
	background-image: -webkit-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -moz-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -o-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -ms-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	
	-webkit-box-shadow: inset 0px 1px 0px #9ab1ec;
	box-shadow: inset 0px 1px 0px #9ab1ec;
	
	cursor: pointer;

	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

#slick-login input[type="submit"]:hover {
	background-color: #5f73e9;
	background-image: -webkit-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -moz-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -o-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -ms-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: linear-gradient(bottom, #5f73e9 0%, #859bef 100%);

	-webkit-box-shadow: inset 0px 1px 0px #aab9f4;
	box-shadow: inset 0px 1px 0px #aab9f4;
	margin-top: 10px;
}

#slick-login input[type="submit"]:active {
	background-color: #7588e1;
	background-image: -webkit-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -moz-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -o-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -ms-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: linear-gradient(bottom, #7588e1 0%, #7184df 100%);

	-webkit-box-shadow: inset 0px 1px 0px #93a9e9;
	box-shadow: inset 0px 1px 0px #93a9e9;
}

结论

这是最终结果的一瞥：

这种形式的妙处在于它很容易更改。它也很容易扩展，添加更多输入，验证，功能等。感谢您的阅读，希望您能学到一些。我很想听听您使用它的目的！

翻译自: https://webdesign.tutsplus.com/articles/smarten-up-a-slick-login-form-with-css3--webdesign-7497

表单登录css样式

daique1908

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单登录css样式_使用CSS3简化一个光滑的登录表单

让我们使用基本HTML5创建一个最小巧的登录表单，然后使用一些CSS3技术对其进行增强。是时候将一些简单的元素变成美丽的东西了。寻找捷径？如果您想为自己的网站提供一些漂亮CSS3表单，并且不想自己创建它们，那么Envato Market上的CSS3 Form Pack不会出错。仅需$ 5，您即可： 33种登录表单样式 66种搜索表单样式 12种联系表单样式具有...
复制链接

扫一扫