wordpress - Display text from alt tag of from title tag on a button with CSS

Question

How to display text from alt tag of from title tag on a button with CSS or with JavaScript? Something like this

document.getElementById("myBtn").value="MyNewValue";

But how do I get the ID's for this buttons?

The buttons are social login buttons and you can see them here:

Virtual Forms Framework login

Answer 1

You have to add some javascript code to achieve this. Check below Snippet:

$('.the_champ_login_ul li').each(function(index) {
  $('<span>' + $(this).find('i').attr('alt') + '</span>').insertAfter($(this).find('i ss'));
});

.theChampLogin {
  width: 100%;
  display: block;
}

.theChampFacebookBackground {
  background-color: #3C589A;
}

.theChampFacebookLoginSvg {
  background: url(//login.create.net/images/icons/user/facebook_30x30.png) left no-repeat;
}

.theChampTwitterLoginSvg {
  background: url(//login.create.net/images/icons/user/twitter-b_30x30.png) left no-repeat;
}

.theChampLoginSvg {
  height: 100%;
  width: 35px;
  display: inline-block;
}

.theChampLogin {
  padding: 0!important;
  margin: 2px;
  height: 35px;
  float: left;
  cursor: pointer;
  border: none;
}

ul.the_champ_login_ul li i span {
  font-style: normal;
  display: inline-block;
  color: #fff;
  line-height: normal;
  vertical-align: top;
  padding-top: 10px;
}

ul.the_champ_login_ul {
  list-style: none!important;
  padding-left: 0!important;
}

.theChampTwitterBackground {
  background-color: #55acee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="the_champ_login_ul">
  <li>
    <i class="theChampLogin theChampFacebookBackground theChampFacebookLogin" alt="Login with Facebook" title="Login with Facebook" style="display: block;"><ss class="theChampLoginSvg theChampFacebookLoginSvg"></ss></i></li>
  <li>
    <i class="theChampLogin theChampTwitterBackground theChampFacebookLogin" alt="Login with Twitter" title="Login with Twitter" style="display: block;"><ss class="theChampLoginSvg theChampTwitterLoginSvg"></ss></i></li>
</ul>