时间:2023-07-24 12:33:02 | 来源:网站运营
时间:2023-07-24 12:33:02 来源:网站运营
如何通过CSS创建不同效果的按钮:<div class="pm"> <button>平面按钮</button></div>
button{display: inline-block;margin: 0 10px 0 0;padding: 15px 45px;font-size:20px;font-family:"Bitter",serif;line-height: 20px;appearance: none; box-shadow:none; border-radius: 0;}
.pm button { color:#fff; background-color:#6496c8; border:none;}
效果图:.pm button { color:#444; border:5px solid #6496c8; background-color: #fff;}
效果图:.pm button { color:#fff; text-align: center; box-shadow:inset 0 0 0 1px #e91e637d; background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}}
效果图:.pm button { color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d;}
效果图:关键词:效果,通过,创建