.btn { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; border-radius: 50px; } .btn:hover { background-color: white; color: #4CAF50; }
以上代码是一个简单的CSS圆角按钮的样式,大家可以根据自己的需要进行调整。
在CSS中,属性border-radius控制元素的圆角。注意,如果border-radius属性的值越大,弯曲角度就越大。
在.btn类中,大家设置border-radius:50px,以获得完全圆形的按钮,您可以根据自己的需求进行调整。
当鼠标悬停在按钮上时,大家将改变按钮的背景颜色和文字颜色。这样可以提高用户体验,因为按钮变成可交互的。
在以上代码中,大家使用的是class=”btn”,因此大家可以在HTML中通过添加class=”btn”来使用此圆角按钮样式。
总之,使用CSS圆角按钮可以使页面更加有吸引力和互动性。 请根据需要调整按钮的样式,以便最符合您的网站设计。