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

Question

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

这就是我所谓的3D按钮。换句话说，当您在html中创建标签时，默认按钮在大多数浏览器上出现。

我现在拥有的是：

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

<button > Home </button> 

更新：在回答您的意见，产生一个从无到有的新的3D背景和边框不正是我脑子里想的（这是那种我的意思通过导入一个很明显的图像），但这可能会解决我的问题。这听起来像没有内置的方式来显示默认的3D按钮悬停，而不会产生新的图像

编辑：为了澄清我想按钮去“默认样式”（如上图）徘徊。当没有徘徊时，它应该出现在上面的CSS中 - 换句话说就是纯文本。用“标准按钮”替换任何提到的“默认3D按钮”。

Answer 1

如果你只是想将样式按钮时，没有鼠标悬停使用th e 否定伪类。

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

<button>Home</button>

Answer 2

这是一个非常基本的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>

Answer 3

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

HTML：

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

CSS：

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; 
} 

JS：

$('a').hover(
     function(){ $(this).addClass('btn-default') }, 
     function(){ $(this).removeClass('btn-default') } 
) 

CODEPEN DEMO