Button Text Disappearing

[kpcollier]

Hello.

I am having a problem. I created buttons for the footer of my datapage to navigate to other pages. They work fine, but once I inserted the code into the footer, the text inside another button I have disappears. 

The first button is in an html block. It is animated and the button is named Bulk. It was working fine, until I added the footer buttons. I added the footer buttons, and the text for the Bulk button disappeared. The actual button and the animation work, but it is blank. I cannot figure out the issue. I am not using the same class names for either buttons nor am I using the same tags.

Code for the Bulk button:

https://codepen.io/kpcollier/pen/rqqeZJ

Code for the Footer buttons:

https://codepen.io/kpcollier/pen/qJJZVy

[Kurumi]

Hi @kpcollier,

I have tried your code and it works fine on my end. Here's the screenshot: 

 Also, here's the code I used in HTML Block and Footer.

 

HTML Block:

<button type="button" class="button-two"><span>Bulk</span></button>

<style>

button{
  color:#fff;
  text-align: center;
  padding: 5px;
}

.button-two{
  text-align: center;
  cursor: pointer;
  font-size:14px;
  margin: 5px 5px 5px 5px;
}

/*Button Two*/
.button-two {
  border-radius: 4px;
  background-color:#d35400;
  border: none;
  padding: 7px 7px 7px 7px;
  transition: all 0.5s;
}

.button-two span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-two span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}

.button-two:hover span {
  padding-right: 11px;
}

.button-two:hover span:after {
  opacity: 1;
  right: 0;
}

</style>


FOOTER:
 

<a href="https://c3eku680.caspio.com/dp/e750500050cb43ba14e544b9ba73" class="action-button shadow animate blue">Add New Job</a>
  
  <a href="https://c3eku680.caspio.com/dp/e750500079a88720edad4e82b056" class="action-button shadow animate blue">Search Jobs</a>
  
  <a href="https://c3eku680.caspio.com/dp/e7505000e5da8380328e43bc9dcd" class="action-button shadow animate blue">Shipping Calender</a>

<style>

.animate
{
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.action-button
{
    position: relative;
    padding: 2px 5px;
  margin: 0px 5px 10px 0px;
  float: left;
    border-radius: 3px;
    font-family: 'Pacifico', cursive;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
}

.blue
{
    background-color: #3498DB;
    border-bottom: 3px solid #2980B9;
    text-shadow: 0px -2px #2980B9;
}

.red
{
    background-color: #E74C3C;
    border-bottom: 5px solid #BD3E31;
    text-shadow: 0px -2px #BD3E31;
}

.green
{
    background-color: #82BF56;
    border-bottom: 5px solid #669644;
    text-shadow: 0px -2px #669644;
}

.yellow
{
    background-color: #F2CF66;
    border-bottom: 5px solid #D1B358;
    text-shadow: 0px -2px #D1B358;
}

.action-button:active
{
    transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;
}

</style>

 

I hope this helps!

[kpcollier]

Thanks, @Meekeee. This worked.

After implementing, I realized my original problem. I had a button in the submission form itself and buttons in the footer for navigation. I had CSS that I was calling without IDs, so it messed with ALL of the buttons.