CSS按钮常用于各种网页设计中,而且创建这些按钮非常简单。您可以使用CSS编写自定义样式来创建各种不同类型的按钮。
按钮样式 CSS :.button{border: 2px solid #000;padding: 10px 20px;font-size: 20px;font-weight: bold;text-align: center;background-color: #fff;}.button:hover{background-color: #000;color: #fff;}上述代码创建了常见的默认按钮和悬停样式。您可以根据需要编辑“border”、“padding”、“background-color”、“color”等属性,以实现您想要的样式按钮。下面是更多CSS按钮样式的代码示例:
.round-button, .round-button:hover {background-color: #fff;border: 2px solid #000;border-radius: 50%;color: #000;display: inline-block;font-size: 20px;height: 50px;line-height: 50px;text-align: center;width: 50px;}.outline-button, .outline-button:hover {background-color: transparent;border: 2px solid #000;color: #000;display: inline-block;font-size: 20px;height: 50px;line-height: 50px;padding: 10px 20px;text-align: center;}.gradient-button, .gradient-button:hover{background: #4776E6; /* fallback for old browsers */background: -webkit-linear-gradient(135deg, #8E54E9, #4776E6);background: -moz-linear-gradient(135deg, #8E54E9, #4776E6);background: -o-linear-gradient(135deg, #8E54E9, #4776E6);background: linear-gradient(135deg, #8E54E9, #4776E6);border: none;color: #fff;cursor: pointer;font-size: 20px;font-weight: bold;padding: 10px 20px;text-align: center;}这些样式可以创建不同的CSS按钮,让按钮更具吸引力和更符合网页的感觉。使用上述样式,您可以创建各种不同类型和风格的按钮以及修改属性以满足您的需求。
上一篇:javascript中可以使用的对象类型
下一篇:css按钮消去默认字









