需要关于将样式应用于按钮的帮助

我正在使用引导程序并将自定义主题应用到它。我已经削减角落使用下面的CSS我.btn类的变化：需要关于将样式应用于按钮的帮助

.btn-primary { 
 
    border:none; 
 
    background: linear-gradient(135deg, transparent 7px, rgb(0,130,114) 7px) 
 
} 
 
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { 
 
    border:none; 
 
    background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px) 
 
} 
 

 
.btn:focus, 
 
.btn:active:focus, 
 
.btn.active:focus, 
 
.btn.focus, 
 
.btn:active.focus, 
 
.btn.active.focus{ 
 
    outline:none; 
 
    box-shadow:none; 
 
}

<div class="row" style="padding-top:10px"> 
 
    <input type="submit" class="btn btn-primary col-lg-4 col-lg-offset-4"> 
 
</div>

这导致按钮看起来像这样：

这正是我想要的，但是当你点击一个按钮时，它会回到原始的矩形形状。我已经尝试过：active，：enabled和：focus伪类，但矩形仍然出现在这张图片中。

什么其他的伪类或元素可能会造成这一点，我怎么能解决这个问题。

来源

2016-10-03 ObiEff

praveen库马尔的解决方案的工作原理，但你必须更新它的目标是特定的类，而不是只是.btn。我曾经使用过：.btn-primary：focus， .btn-primary：active：focus， .btn-primary.active：focus， .btn-primary.focus， .btn-primary：active， .btn -primary：active：hover， .btn-primary.active。焦点{背景：线性梯度（135deg，透明7px，rgb（0,106,91）7px） } – ObiEff

你的CSS正在被引导的覆盖。

包括下面这行代码。这将解决您的问题。

.btn-primary:active:focus { 
    background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px); 
}

干杯！让我知道它是否工作。我将您的代码分叉到我的Codepen帐户并解决了问题。这里看一看： http://codepen.io/thekamlesh/pen/ZpXgJY

来源

2016-10-03 11:16:49

只需添加background如你一样有一个，而不使用!important：

.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active, 
.btn:active:hover, 
.btn.active.focus{ 
    outline: none; 
    box-shadow: none; 
    background: linear-gradient(135deg, transparent 7px, rgb(0,106,91) 7px); 
}

工作：http://codepen.io/anon/pen/KgXOwb

来源

2016-10-03 10:20:30

不幸的是我已经试过这些，他们没有工作。你可以在这里尝试一下：http://codepen.io/anon/pen/dpVBAX – ObiEff

@ObiEff尝试一下......看哪。我有同样的问题。 –

@ObiEff与背景一起工作。 –

更新

快速修复将!important添加到背景。

！重要的是有效的CSS。您可能会继承一个项目，其中以前的开发人员使用它，或者您可能需要快速修补 - 因此它可以派上用场。

CSS： “：活动：焦点” 事件

.btn-primary { 
    border: none; 
    background: linear-gradient(135deg, transparent 7px, rgb(0, 130, 114) 7px) 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active { 
    outline: none!important; 
    border: none; 
    background: linear-gradient(135deg, transparent 7px, rgb(0, 106, 91) 7px)!important; 
}

来源

2016-10-03 10:20:48

已经尝试过这些，很不幸没有工作。试试我添加的codepen。 – ObiEff

将'！important'添加到背景。答案已更新 –

需要关于将样式应用于按钮的帮助

回答

相关问题