我有以下代码,其中有一个具有箭头黑客的Button。唯一的问题是我希望显示状态栏上的链接。按钮无法实现。如何将其转换为href链接并仍然能够保留该箭头?这是我的代码:
HTML:
<button type="button" class="btn-lg btn-default my-button my-button-active">My Button</button>
CSS:
.my-button {
color: #fff ;
background-color: #444346;
font-size:15px;
padding: 20px 0px;
border:none;
margin-right:20px;
position: relative;
outline:0;
width:31%;
}
.my-button-active:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #444346;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
.my-button-active:hover:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #e6e6e6;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
答案 0 :(得分:3)
很简单。只需将按钮转换为a,然后将display: block;
或display: inline-block;
添加到类.my-button。
答案 1 :(得分:1)
将您的html更改为锚标记:
<a class="btn-lg btn-default my-button my-button-active" href="">My Button that links to some other page</a>
将您的.my-button
选择器替换为:
.my-button {
display: block;
position: relative;
color: #fff;
background-color: #444346;
font-size:15px;
padding: 20px 0;
text-align: center;
border: none;
margin-right: 20px;
outline: 0;
width: 31%;
}
答案 2 :(得分:0)
只需将按钮更改为锚点并调整css。
div {
margin: 30px;
}
a.my-button {
color: #fff ;
background-color: #444346;
font-size:15px;
padding: 20px 0px;
border:none;
margin-right:20px;
position: relative;
outline:0;
width:31%;
display: inline-block;
text-align: center;
}
.my-button:hover {
text-decoration: none;
}
.my-button-active:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #444346;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
.my-button-active:hover:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #e6e6e6;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<a href="#" type="button" class="btn-lg btn-default my-button my-button-active">My Button that links to some other page</a>
</div>
答案 3 :(得分:-1)
将<button>
代码更改为<a>
代码后,关键是应用了display: block;
,因为<a>
代码主要是内联元素,不能有填充和边距。