如何将标准文本标签转换为悬停按钮?
我想要一个显示为标准文本的按钮,但是在悬停时转换为标准按钮样式。如何将标准文本标签转换为悬停按钮?
这就是我所谓的3D按钮。换句话说,当您在html中创建标签时,默认按钮在大多数浏览器上出现。
我现在拥有的是:
button{
margin:5px;
background-color:white;
border:0px;
}
...
<button > Home </button>
更新:在回答您的意见,产生一个从无到有的新的3D背景和边框不正是我脑子里想的(这是那种我的意思通过导入一个很明显的图像),但这可能会解决我的问题。这听起来像没有内置的方式来显示默认的3D按钮悬停,而不会产生新的图像
编辑:为了澄清我想按钮去“默认样式”(如上图)徘徊。当没有徘徊时,它应该出现在上面的CSS中 - 换句话说就是纯文本。用“标准按钮”替换任何提到的“默认3D按钮”。
如果你只是想将样式按钮时,没有鼠标悬停使用th e 否定伪类。
button:not(:hover) {
background: white;
border-color: white;
border-style: solid;
}
<button>Home</button>
伟大的答案!我也学到了一些新东西。 –
这是一个非常基本的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>
您可以将项目更改为使用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') }
)
我没有想过产生一个新的背景,我认为你需要导入一个图像。如果您希望按钮的外观依赖于浏览器,即基于任何浏览器的默认按钮,而不是以编程方式生成? –
你可以在CSS中完成所有工作,如果你愿意,你甚至可以应用渐变。不需要外部图像!在演示中,我还应用了一个盒子阴影以给它更多的3D感觉。它们看起来是一样的,这是标准的HTML和CSS。 –
我测试了除safari以外的所有浏览器上的3D按钮,它们看起来都一样。只是要确保XP –
你所说的 “3D背景” 是什么意思?你有没有你想要达到的例子?你知道你想要应用的CSS,只是现在如何让它出现在悬停状态?目前还不清楚你目前的障碍是什么。 –
请添加您将用于使其显示为普通文本的CSS和HTML。 – RyanS