CSS：
pre{
font-size:12px;
font-family: ‘Courier New’, Courier, monospace;
}
.sign-in {
display: inline-block;
width: 100%;
height: 50px;
padding: 5px 0;
margin-top: 20px;
color: #fff;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
background: linear-gradient(to right, #29b6f6, #4fc3f7, #29b6f6);
border: none;
border-radius: 10px;
box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.5);
}
input[type=text],
input[type=password] {
display: block;
width: 100%;
height: 50px;
padding: 5px 20px;
font-size: 16px;
margin-top: 20px;
border: 2px solid #29b6f6;
border-radius: 10px;
box-sizing: border-box;
transition: 0.2s;
}
input[type=text]:focus,
input[type=password]:focus {
border: 2px solid #4fc3f7;
outline: none;
}
在以上代码中，大家选择了.login类，同时将按钮设置为display：inline-block;，并使它的高度和宽度调整到正确的尺寸。大家还使用了渐变背景色，添加了投影和圆角边框，以便为登录按钮添加灵感。
对于文本框，大家选择并调整了每个元素的大小，同时添加了圆角边框和颜色。大家还使用了CSS过渡，以使文本框更具动态性。
结论
现在，您已经了解了如何设置CSS登录按钮，并且您可以使用CSS和HTML将您的按钮和表单更好地组合在一起。有了以上说明，您应该有一些想法，该如何将内页的其他元素所有配合组合在一起，以创建完美的页面设计。
首页 >
css登录按钮怎么设置 |css 左右渐变
css学了什么，css禁止超出body，css属性position的值，css样式分为那几种，css兼容pc和移动端，css图片按钮代码怎么写，css 左右渐变CSS：
pre{
font-size:12px;
font-family: ‘Courier New’, Courier, monospace;
}
.sign-in {
display: inline-block;
width: 100%;
height: 50px;
padding: 5px 0;
margin-top: 20px;
color: #fff;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
background: linear-gradient(to right, #29b6f6, #4fc3f7, #29b6f6);
border: none;
border-radius: 10px;
box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.5);
}
input[type=text],
input[type=password] {
display: block;
width: 100%;
height: 50px;
padding: 5px 20px;
font-size: 16px;
margin-top: 20px;
border: 2px solid #29b6f6;
border-radius: 10px;
box-sizing: border-box;
transition: 0.2s;
}
input[type=text]:focus,
input[type=password]:focus {
border: 2px solid #4fc3f7;
outline: none;
}
在以上代码中，大家选择了.login类，同时将按钮设置为display：inline-block;，并使它的高度和宽度调整到正确的尺寸。大家还使用了渐变背景色，添加了投影和圆角边框，以便为登录按钮添加灵感。
对于文本框，大家选择并调整了每个元素的大小，同时添加了圆角边框和颜色。大家还使用了CSS过渡，以使文本框更具动态性。
结论
现在，您已经了解了如何设置CSS登录按钮，并且您可以使用CSS和HTML将您的按钮和表单更好地组合在一起。有了以上说明，您应该有一些想法，该如何将内页的其他元素所有配合组合在一起，以创建完美的页面设计。
CSS：
pre{
font-size:12px;
font-family: ‘Courier New’, Courier, monospace;
}
.sign-in {
display: inline-block;
width: 100%;
height: 50px;
padding: 5px 0;
margin-top: 20px;
color: #fff;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
background: linear-gradient(to right, #29b6f6, #4fc3f7, #29b6f6);
border: none;
border-radius: 10px;
box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.5);
}
input[type=text],
input[type=password] {
display: block;
width: 100%;
height: 50px;
padding: 5px 20px;
font-size: 16px;
margin-top: 20px;
border: 2px solid #29b6f6;
border-radius: 10px;
box-sizing: border-box;
transition: 0.2s;
}
input[type=text]:focus,
input[type=password]:focus {
border: 2px solid #4fc3f7;
outline: none;
}
在以上代码中，大家选择了.login类，同时将按钮设置为display：inline-block;，并使它的高度和宽度调整到正确的尺寸。大家还使用了渐变背景色，添加了投影和圆角边框，以便为登录按钮添加灵感。
对于文本框，大家选择并调整了每个元素的大小，同时添加了圆角边框和颜色。大家还使用了CSS过渡，以使文本框更具动态性。
结论
现在，您已经了解了如何设置CSS登录按钮，并且您可以使用CSS和HTML将您的按钮和表单更好地组合在一起。有了以上说明，您应该有一些想法，该如何将内页的其他元素所有配合组合在一起，以创建完美的页面设计。