如何在悬停时将标准文本标签转换为按钮？

Question

我想要一个显示为标准文字的按钮，但在悬停时会转换为标准按钮样式。

这就是我所说的3D按钮。换句话说，当您在html中创建标记时，大多数浏览器上都会显示默认按钮。

我现在拥有的是：

button{
margin:5px;
background-color:white;
border:0px;
}
...

<button > Home </button>

更新：为了回应您的评论，从头开始生成新的3D背景和边框并不是我想到的（这就是我通过导入图像显而易见的意思），但这可能会解决我的问题。听起来没有内置的方法在悬停时显示默认的3D按钮，而不会生成新图像

编辑：澄清我希望按钮在悬停时转到“默认样式”（如上图所示）。当没有悬停时，它应该出现在上面的CSS中指定 - 换句话说纯文本。用“标准按钮”替换任何“默认3D按钮”。

Answer 1

如果您只想在按钮未悬停时应用样式，请使用否定伪类。

button:not(:hover) {
  background: white;
  border-color: white;
  border-style: solid;
}

<button>Home</button>

Answer 2

您可以使用jQuery和Bootstrap将项目更改为按钮。这将是最简单的方法。

HTML：

Sub ListColumnHeadings()

Dim cNbrs As Long, i As Integer, tr As Long, tc As Long, wst As Worksheet
Dim charList(300, 300) As String

Dim ws As Worksheet, OutputRow As Long
Dim myRange As Range
Dim NumRows As Integer
Dim colNbr As Range

Set shSkip1 = ThisWorkbook.Sheets("SheetName Record Cnt")
Set shList = ThisWorkbook.Sheets("SheetName Columns")

OutputRow = 1
On Error Resume Next

For Each ws In Worksheets
  If ws.Name <> shList.Name And ws.Name <> shSkip1.Name Then

    cNbrs = ws.Range("A1").CurrentRegion.Columns.Count

    For i = 8 To cNbrs
      shList.Cells(OutputRow, "A").Value = ws.Name
      shList.Cells(OutputRow, "B").Value = ws.Cells(1, i)

      Set myRange = ws.Columns(i).Select

      NumRows = ws.Application.WorksheetFunction.CountA(myRange)
      If NumRows > 0 Then
        shList.Cells(OutputRow, "C").Value = NumRows
      End If

      OutputRow = OutputRow + 1
    Next i

  End If
Next ws


End Sub

CSS：

<a class="centered" href="javascript:void(0);">Home</a>

JS：

a{
  position: fixed;
  padding: 5px;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  color: black;
}

a:hover{
   text-decoration: none;
}

.btn-default{
   border: 1px solid grey;
}

CODEPEN DEMO

Answer 3

这是一个非常基本的CSS按钮。我刚刚使用了内置的CSS：悬停效果并为锚元素添加了一些基本样式。

#button {
  text-decoration: none;
  width: 45px;
  height: auto;
  padding: 5px;
  }

#button:hover {
  border: 1px solid white;
  border-radius: 5px;
  background: -webkit-linear-gradient(white, silver); 
  background: -o-linear-gradient(white, silver); 
  background: -moz-linear-gradient(white, silver); 
  background: linear-gradient(white, silver);
  box-shadow: 0px 9px 0px rgba(0,0,0,0), 0px 9px 25px rgba(1,0,0,1); 
  color: black;
  }

<a href='#' id='button'>Click</a>