Jump to content
kpcollier

Button Text Disappearing

Recommended Posts

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

Share this post


Link to post
Share on other sites

Hi @kpcollier,

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

image.png.d12d32867be22cf8d5ef9b937230faa0.png

 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!

Share this post


Link to post
Share on other sites

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.

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

Loading...

×
×
  • Create New...