css登錄按鈕怎么設置
要設置有吸引力的登錄按鈕，CSS可以是您的良好工具。CSS是一種用于創建使Web頁面具有設計優雅的樣式的語言。現在你可以用CSS創建作為完整樣式表形式的類或ID樣式。
首先，讓我們創建一個HTML文檔，并在其中插入一個登錄表單和按鈕。以下是HTML和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將您的按鈕和表單更好地組合在一起。有了以上說明，您應該有一些想法，該如何將內頁的其他元素所有配合組合在一起，以創建完美的頁面設計。
上一篇css疾病