我正在努力为我的按钮添加透明背景。
我知道这很简单,但我不确定我做错了什么不能生效。
我写过的Html代码:
<div class="footer-text-cta">
<p>Want to know what equipment I use when I go kayaking?<button class="green-button"><a href="#" class="manual-optin-trigger" data-optin-slug="atefh5rvxazforll">I want to know!</a></button></p>
</div>
我的CSS代码:
button.green-button{
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 7px 20px !important;
border-radius: 5px;
margin: 0px 0px 0px 20px;
background-color: #1ec279;
border: 3px solid #1ec279;
border-radius: 5px;
}
button.green-button a {
text-decoration: none;
color: #fff;
}
button.green-button a:hover{
background-color: transparent;
color: #1ec279;
}
答案 0 :(得分:1)
这里你有一个很好的过渡XD
button.green-button{
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 7px 20px !important;
border-radius: 5px;
margin: 0px 0px 0px 20px;
background-color: #1ec279;
border: 3px solid #1ec279;
border-radius: 5px;
transition: 0.8s;
}
button.green-button a {
text-decoration: none;
color: #fff;
}
button.green-button:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;
}
button.green-button:hover a{
color: #1ec279;
}
&#13;
<div class="footer-text-cta">
<p>Want to know what equipment I use when I go kayaking?<button class="green-button"><a href="#" class="manual-optin-trigger" data-optin-slug="atefh5rvxazforll">I want to know!</a></button></p>
</div>
&#13;
答案 1 :(得分:0)
这样的按钮的唯一技巧是有一个border
。我将假设在:hover
上你想要背景出现,因为这似乎是这些鬼或大纲按钮样式的最常见用法。
在这种情况下,您的代码可能如下所示:
.button-example {
padding: 15px;
background: #000;
}
.button {
display: inline-block;
padding: 10px 15px;
font-family: Helvetica, Arial, sans-serif;
border: 3px solid #aaa;
border-radius: 6px;
cursor: pointer;
}
.button-green {
background: #1ec279;
border-color: #1ec279;
color: #fff;
}
.button-green.button-outline {
background: none;
}
.button-green:hover {
background: #19a969;
border-color: #19a969;
}
<div class="button-example">
<button class="button button-green">
I am a green button
</button>
<button class="button button-green button-outline">
I am a green outline button
</button>
<button class="button">
I am a sad, colorless button
</button>
</div>