[分享]css3按钮切换效果代码

CSS3按钮切换效果是一个非常常用的界面设计元素。通过使用CSS3，我们可以轻松地创造出非常独特的按钮效果，以此来提高网站用户体验。 首先，我们需要使用pre标签将CSS3的代码展示出来： .butt...

CSS3按钮切换效果是一个非常常用的界面设计元素。通过使用CSS3，我们可以轻松地创造出非常独特的按钮效果，以此来提高网站用户体验。 首先，我们需要使用pre标签将CSS3的代码展示出来：

.button {
    padding: 10px;
    border: none;
    background-color: #CCC;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
 
.button:hover {
    background-color: #666;
    color: #FFF;
}
 
.active {
    background-color: #333;
    color: #FFF;
} 

以上是一个非常简单的CSS3按钮切换代码。我们首先定义了一个名为.button的样式，它设置按钮的一般样式，例如内边距、边框、颜色等。接下来我们定义了:hover样式，当鼠标悬停在按钮上时，它的背景和文本颜色会改变。最后，我们定义了.active样式，当按钮被选中时，背景和文本颜色也会改变。 接下来，我们可以使用JavaScript来激发按钮的切换事件。为了演示这个功能，我们创建两个按钮和一个段落。

按钮1 按钮2

按钮1按钮2这两个button标签就是我们创建的两个按钮。它们有一个共同的类名button，并且分别有不同的id属性。这确保了我们可以分别在后续javascript代码中引用它们。 最后，我们使用JavaScript来切换按钮的样式。

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
 
button1.onclick = function() {
    button1.classList.add("active");
    button2.classList.remove("active");
};
 
button2.onclick = function() {
    button2.classList.add("active");
    button1.classList.remove("active");
}; 

使用JavaScript获取按钮元素的引用，我们可以轻松地在每个按钮上定义onclick事件处理程序。当一个按钮被点击时，我们可以删除所有其他按钮的“活动”类，并将该类添加到当前被单击的按钮上。 通过使用上述代码，我们可以轻松地创建一个功能齐全的CSS3按钮切换效果。这个技术可以应用于任何网站，无论是桌面还是移动设备。它可以增强网站的用户体验，并使您的站点更加专业。