删除按钮周围的灰色框

问题描述：

正如标题所说，我无法移除围绕我的按钮的灰色框。我曾尝试使用outline: none，但没有奏效。删除按钮周围的灰色框

这里你可以看到它（JSFiddle）：

.btn-group { 
 
    background: #4abdac; 
 
    background-image: -webkit-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -moz-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -ms-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -o-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: linear-gradient(to bottom, #4abdac, 4abdac); 
 
    -webkit-border-radius: 33; 
 
    -moz-border-radius: 33; 
 
    border-radius: 33px; 
 
    font-family: Arial; 
 
    color: #000; 
 
    font-size: 20px; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
}

<div><button><a class="btn-group" style="color: #000;" href="www.example.com"><span style="color: #ffffff;">Example Text&nbsp;</span></a></button></div>

删除按钮标签 –

烨明白了遗憾甚至没有注意到的感谢！ – Mangolicious

答

在你的问题你不删除按钮的默认样式，这就是为什么你有灰色背景，你可以删除这种风格

button { 
    border:none; 
    background-color:transperant; 
    outline:none; 
}

那你还不需要使用锚定标记按钮，只需要调用像这样

.btn-group { 
 
    background: #4abdac; 
 
    background-image: -webkit-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -moz-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -ms-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -o-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: linear-gradient(to bottom, #4abdac, 4abdac); 
 
    -webkit-border-radius: 33; 
 
    -moz-border-radius: 33; 
 
    border-radius: 33px; 
 
    font-family: Arial; 
 
    color: #fff; 
 
    font-size: 20px; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
    border:none; 
 
}

<div> 
 
<button class="btn-group" onclick="window.location.href='www.example.com'">Example Text</button> 
 
</div>

很酷感谢病了替换它 - 仍然是一个新手，所以所有的提示帮助 – Mangolicious

@Mangolicious如果这个答案是使用全部给你 –

答

只需卸下button标签这样的：

https://jsfiddle.net/Lsjgdt4d/

哦，这是一个愚蠢的问题geez ..谢谢！ – Mangolicious

答

只是

替换代码

<style> 
.btn-group { 
    background: #4abdac; 
    background-image: -webkit-linear-gradient(top, #4abdac, 4abdac); 
    background-image: -moz-linear-gradient(top, #4abdac, 4abdac); 
    background-image: -ms-linear-gradient(top, #4abdac, 4abdac); 
    background-image: -o-linear-gradient(top, #4abdac, 4abdac); 
    background-image: linear-gradient(to bottom, #4abdac, 4abdac); 
    -webkit-border-radius: 33; 
    -moz-border-radius: 33; 
    border-radius: 33px; 
    font-family: Arial; 
    color: #000; 
    font-size: 20px; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
} 
</style> 
<div> 
<a class="btn-group" style="color: #000;" href="www.example.com"><span style="color: #ffffff;">Example Text&nbsp;</span></a></div>

答

将这个CSS与你的CSS代码一起

button{ 
    border: none; 
    background: transparent; 
}

答

应用样式的按钮元素和剿股利：

<a style="color: #000;" href="www.example.com"><button class="btn-group"> 
<span style="color: #ffffff;">Example Text&nbsp;</span></button></a>

答

删除按钮标签，并添加样式display：inline-block的标签。因为标签是内联元素。我们必须将块元素集样式更改为display：inline-block。

.btn-group { 
 
    background: #4abdac; 
 
    background-image: -webkit-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -moz-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -ms-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: -o-linear-gradient(top, #4abdac, 4abdac); 
 
    background-image: linear-gradient(to bottom, #4abdac, 4abdac); 
 
    -webkit-border-radius: 33; 
 
    -moz-border-radius: 33; 
 
    border-radius: 33px; 
 
    font-family: Arial; 
 
    color: #000; 
 
    font-size: 20px; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
    margin-top:10px; 
 
    display:inline-block; 
 
}

<div><a class="btn-group" style="color: #000;" href="www.example.com"><span style="color: #ffffff;">Example Text&nbsp;</span></a></div>

删除按钮周围的灰色框

相关推荐