Button Padding Not Working

Question

I have an image banner which I'm trying to add a button on top of it. The button is in HTML format and not an image. However, the problem is that I'm unable to move the button on top of the image. I believe it has to do with the margin of the button. I've implemented the following codes into my Weebly website, and though the button seems to fit perfectly well inside the editor, after publishing, the button displays on the bottom of the banner. Here is my HTML code:

The "margin:-70px" seems to be correct, though it doesn't apply after publishing. So what's wrong? Is there something missing?

.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

i recommend using absolute position for the button since there is no alternative

.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 */
}

i have jsfiddle for it https://jsfiddle.net/Ls6coLb7/

Answer 2

Give this code to padding: 10px 15px 10px; to .btn_action_1 span this class, I think it will work

.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 3

Just add this class

.img-wrapper .btn_action_1{

  display:block;
  margin-top:-100px

}

Fiddler https://jsfiddle.net/ov9rxuys/