Jump to content

Button Text Disappearing

Recommended Posts


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:


Code for the Footer buttons:


Link to comment
Share on other sites

  • 3 weeks later...

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>


  text-align: center;
  padding: 5px;

  text-align: center;
  cursor: pointer;
  margin: 5px 5px 5px 5px;

/*Button Two*/
.button-two {
  border-radius: 4px;
  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;



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


    transition: all 0.1s;
    -webkit-transition: all 0.1s;

    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;

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

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

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

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

    transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;



I hope this helps!

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...