按钮填充不起作用

Question

我有一个图像横幅，我试图在其上添加一个按钮。该按钮采用HTML格式，而不是图像。但是，问题是我无法移动图像顶部的按钮。我相信它与按钮的边缘有关。我在Weebly网站上实现了以下代码，尽管该按钮似乎完全适合编辑器，但发布后，该按钮会显示在横幅底部。以下是我的HTML代码：

“margin：-70px”似乎是正确的，尽管它在发布后并不适用。那么，怎么了？有什么遗漏吗？

.btn_action_1 { 
 
    border: 5px solid #000 !important; 
 
    /* Change button border color */ 
 
    color: #000 !important; 
 
    /* Change button text color */ 
 
    font-size: 22px; 
 
    font-family: 'Ubuntu'; 
 
    line-height: 0; 
 
    display: inline-block; 
 
    padding: 10px 15px 10px; 
 
    position: relative; 
 
    text-decoration: none; 
 
    z-index: 3; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.btn_action_1 span { 
 
    left: 10px; 
 
    position: relative; 
 
    -o-transition: all .4s; 
 
    -moz-transition: all .4s; 
 
    -webkit-transition: all .4s; 
 
    transition: all .4s; 
 
} 
 

 
.btn_action_1 .ico_arrow { 
 
    background: url(ico_arrow_w.png) 0 center no-repeat; 
 
    display: inline-block; 
 
    height: 17px; 
 
    width: 17px; 
 
    position: relative; 
 
    left: -12px; 
 
    top: 0px; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    -o-transition: all .4s; 
 
    -moz-transition: all .4s; 
 
    -webkit-transition: all .4s; 
 
    transition: all .4s; 
 
} 
 

 
.btn_action_1:hover { 
 
    background: #000 !important; 
 
    /* Change button background color when mouse over */ 
 
    color: #fff !important; 
 
    /* Change button text color when mouse over */ 
 
} 
 

 
.btn_action_1:hover span { 
 
    left: -5px; 
 
} 
 

 
.btn_action_1:hover .ico_arrow { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    left: 5px; 
 
} 
 

 
@media (max-width: 479px) { 
 
    .btn_action_1 { 
 
    padding: 18px 30px; 
 
    } 
 
} 
 

 
.btn_action_1:not(:hover)>.hover, 
 
.btn_action_1:hover>.default { 
 
    display: none 
 
}

<img src="http://unlckpaypal.weebly.com/uploads/6/3/8/8/63884033/left_banner.png" style="margin: 10px 0px 0px 0px;width:440px;height:210px;"> 
 

 
<a href="http://unlckpaypal.weebly.com/trending-127809.html" style="margin:-70px 0px 0px 200px;width:180px;height:45px;" class="btn_action_1"> 
 
    <span>SHOP NOW</span> 
 
    <i class="ico_arrow"></i> 
 
</a>

Answer 1

将该代码提交给padding: 10px 15px 10px;到.btn_action_1 span这个类，我认为它会工作

.btn_action_1 { 
 
border: 5px solid #000 !important; /* Change button border color */ 
 
color: #000 !important; /* Change button text color */ 
 
font-size: 22px; 
 
font-family: 'Ubuntu'; 
 
line-height: 0; 
 
display: inline-block; 
 
padding: 10px 15px 10px; 
 
position: relative; 
 
text-decoration: none; 
 
z-index: 3; 
 
-webkit-box-sizing: border-box; 
 
-moz-box-sizing: border-box; 
 
box-sizing: border-box; 
 
} 
 
.btn_action_1 span { 
 
left: 10px; 
 
position: relative; 
 
-o-transition: all .4s; 
 
-moz-transition: all .4s; 
 
-webkit-transition: all .4s; 
 
transition: all .4s; 
 
} 
 
.btn_action_1 .ico_arrow { 
 
background: url(ico_arrow_w.png) 0 center no-repeat; 
 
display: inline-block; 
 
height: 17px; 
 
width: 17px; 
 
position: relative; 
 
left: -12px; 
 
top: 0px; 
 
opacity: 0; 
 
filter: alpha(opacity=0); 
 
-o-transition: all .4s; 
 
-moz-transition: all .4s; 
 
-webkit-transition: all .4s; 
 
transition: all .4s; 
 
} 
 

 
.btn_action_1:hover { 
 
background: #000 !important; /* Change button background color when mouse over */ 
 
color: #fff !important; /* Change button text color when mouse over */ 
 
} 
 

 
.btn_action_1:hover span { 
 
left: -5px; 
 
} 
 
.btn_action_1:hover .ico_arrow { 
 
opacity: 1; 
 
filter: alpha(opacity=100); 
 
left: 5px; 
 
} 
 
@media (max-width: 479px) { 
 
.btn_action_1 { 
 
    padding: 18px 30px; 
 
} 
 
} 
 

 
.btn_action_1:not(:hover)>.hover, 
 
.btn_action_1:hover> 
 
.default {display:none}

<img src="http://unlckpaypal.weebly.com/uploads/6/3/8/8/63884033/left_banner.png" 
 
style="margin: 10px 0px -50px 0px;width:440px;height:210px; position:relative;"> 
 

 
<a href="http://unlckpaypal.weebly.com/trending-127809.html" 
 
style="margin:-30px 10px 10px 220px;width:180px;height:45px; " 
 
class="btn_action_1"> 
 
<span>SHOP NOW</span> 
 
<i class="ico_arrow"></i> 
 
</a>

Answer 2

只需添加此类

.img-wrapper .btn_action_1{ 

    display:block; 
    margin-top:-100px 

} 

提琴手https://jsfiddle.net/ov9rxuys/

Answer 3

我建议使用绝对位置的按钮，因为没有替代

.btn_action_1 { 
    position: absolute; /* remove margin from HTML if possible */ 
    bottom: 20px; /* adjust as you want it to be */ 
    right: 50px; /* adjust as you want it to be */ 
} 

我必须的jsfiddle它https://jsfiddle.net/Ls6coLb7/