歐尼off開關是一種常用的CSS效果，可以使一個元素在經過鼠標懸停或點擊時樣式發生變化。在使用歐尼off開關之前，我們需要先設置元素的樣式和默認狀態。

.button {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background-color: #2196F3;
color: #fff;
text-decoration: none;
}
.button:hover,
.button:focus {
background-color: #1976D2;
}

在以上代碼中，我們定義了一個.button類，設置了按鈕的樣式，并使用:hover和:focus偽類定義了按鈕的懸停和聚焦狀態。接下來我們可以使用歐尼off開關將按鈕的狀態切換。

.button {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background-color: #2196F3;
color: #fff;
text-decoration: none;
}
.off {
background-color: #ccc;
color: #666;
cursor: default;
pointer-events: none;
}
.button:hover,
.button:focus {
background-color: #1976D2;
}
.off:hover,
.off:focus {
background-color: #ccc;
}

在以上代碼中，我們新增了一個.off類，并設置了該類在按鈕被禁用時的樣式，包括背景顏色、文字顏色、光標以及指針事件。接下來我們在按鈕被點擊時使用JavaScript將按鈕的類名改為.off，這樣按鈕的狀態就會變為被禁用。

var button = document.querySelector('.button');
button.addEventListener('click', function() {
button.classList.toggle('off');
});

在以上代碼中，我們使用querySelector方法獲取了.button元素，并使用addEventListener方法注冊了一個點擊事件。在事件處理函數中，我們使用classList.toggle方法切換了按鈕的.off類，從而實現了按鈕的開關效果。