整個 CSS 按鈕不可點擊

Question

我在這個 CSS 代碼上發現了 2 個問題 -

1. 整個按鈕不可點擊。
2. 按鈕的文本總是與我設置的顏色不同。 例如，我將文本顏色設置為白色，但它仍然是不同的顏色。

 .visitbutton { line-height: 1.6; font-style: normal; font-size: 20px; text-align: center; color: white; background-color: #34495E; text-decoration: none; font-weight: bold; font-family: Arial, sans-serif; border: solid 0 #e3edf4; border-bottom: 2px solid #AEB6BF; border-radius: 4px; padding: 16px 40px; }

 <div class="visitbutton"> <a href="https://google.com" target="_blank">Visit Now</a> </div>

Answer 1

它不起作用的原因是<a>標簽不是按鈕，它定義了一個超鏈接。 使用按鈕將是一個更好的選擇。

要使字體顏色為白色，您必須以該元素或其選擇器為目標。

這是對您的代碼的更正。

 .visitbutton { line-height: 1.6; font-style: normal; font-size: 20px; text-align: center; color: white; background-color: #34495E; text-decoration: none; font-weight: bold; font-family: Arial, sans-serif; border: solid 0 #e3edf4; border-bottom: 2px solid #AEB6BF; border-radius: 4px; padding: 16px 40px; }

 <div> <a href="https://google.com" class="visitbutton" target="_blank">Visit Now</a> </div>

Answer 2

1：將按鈕 div 放在 a-tag 內（ <a...><div>Visit now</div></a> ）。

2：顏色不同的原因是錨標簽（ <a> ）具有隱式樣式。 只需手動覆蓋它即可修復它，但您必須在 a-tag 或更低的標簽中覆蓋它。 所以它可能與可點擊性一起修復！

Answer 3

整個按鈕不作為鏈接的原因是因為它是一個 div。 如果你想讓它成為一個鏈接，並設置鏈接的 colors 那么你需要直接設置它的樣式。 現在你只是在它周圍設置 div 的樣式。 這是一個使用 JavaScript 的示例：第二個按鈕可能無法打開，因為您的瀏覽器認為它是一個彈出窗口，請改用鏈接。

 button { line-height: 1.6; font-style: normal; font-size: 20px; text-align: center; color: white; background-color: #34495E; text-decoration: none; font-weight: bold; font-family: Arial,sans-serif; border: solid 0 #e3edf4; border-bottom: 2px solid #AEB6BF; border-radius: 4px; padding: 16px 40px; }

 <button onclick="window.location.href='https://example.com'">Changes the current page</button> <br /> <button onclick="window.open('https://example.com')">Opens in a new tab</button>

Answer 4

在您的情況下，整個區域不可點擊，因為默認情況下只有 a 內a文本是可點擊的鏈接。 您需要對a css 進行如下更改以獲得理想的結果-

 .visitbutton { line-height: 1.6; font-style: normal; font-size: 20px; text-align: center; color: white; background-color: #34495e; text-decoration: none; font-weight: bold; font-family: Arial, sans-serif; border: solid 0 #e3edf4; border-bottom: 2px solid #aeb6bf; border-radius: 4px; }.visitbutton a { display: block; text-decoration: none; color: white; padding: 16px 40px; }

 <div class="visitbutton"> <a href="https://google.com" target="_blank">Visit Now</a> </div>

我還將填充從.visitbutton移動到.visitbutton a ，以便整個區域都是可點擊的鏈接。

---

此外，您可以使用按鈕而不是使用 div ，這可能是一個更好的選擇 -

 .visitbutton { line-height: 1.6; font-size: 20px; color: white; background-color: #34495e; font-weight: bold; font-family: Arial, sans-serif; border: solid 0 #e3edf4; border-bottom: 2px solid #aeb6bf; border-radius: 4px; width: 100%; } a { text-decoration: none; color: white; padding: 16px 40px; }

 <button class="visitbutton"> <a href="https://google.com" target="_blank">Visit Now</a> </button>

Answer 5

塊元素默認占用 100% 的空間

 .visitbutton, a { line-height: 1.6; font-style: normal; font-size: 20px; text-align: center; color: white; background-color: #34495E; text-decoration: none; font-weight: bold; font-family: Arial, sans-serif; border: solid 0 #e3edf4; border-bottom: 2px solid #AEB6BF; border-radius: 4px; padding: 16px 40px; display: block; }

 <div class="visitbutton"> <a href="https://stackoverflow.com">Visit Now</a> </div>

Answer 6

看，有幾點需要注意，如果你想要一個按鈕，使用button標簽，不同的顏色是因為它是一個修復它的鏈接，你可以使用這個代碼：

 .visitbutton { line-height: 1.6; font-style: normal; font-size: 20px; text-align: center; background-color: #34495E; text-decoration: none; font-weight: bold; font-family: Arial,sans-serif; border: solid 0 #e3edf4; border-bottom: 2px solid #AEB6BF; border-radius: 4px; padding: 16px 40px; }.visitbutton a{ text-decoration: none; color: white; }

 <button class="visitbutton"> <a href="https://google.com" target="_blank">Visit Now</a> </button>