How to show play and pause text on hover-CodePudding

I have a demo application in which I want to show the Play and Pause icon.I am able to make a play and pause Icon. But there is another requirement I need to show PLAY and PAUSE TEXT on hover

I am facing two issues.

My icon is Jumping above when I hover to button
PLAY or PAUSE text not coming centre.(It is showing slightly below )
How to show different text depending state;

Here is my code https://jsbin.com/qifigeruti/3/edit?html,css,js,output

.container {
  padding: 8px;
  border: 1px solid;
  display: inline-block;
}

.text {
  display: none;
}

.button {
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 20px;
  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  padding: 0
}

.button.paused {
  border-style: double;
  border-width: 0px 0 0px 20px;
}

.button:hover {
  border-color: transparent transparent transparent #404040;
}

.button:hover span {
  display: inline;
}

<div class="container">
  <button class='button'>
      <span class="text">Play</span>
    </button>
</div>

CodePudding user response：

You can align it with flex, give transition to the container like this:

function onToggle() {
  document.getElementById("clicked").classList.toggle("button");
  document.getElementById("clicked").classList.toggle("pauseicon");
}

.container {
  padding: 10px;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s linear;
}

.text-1,
.text-2 {
  display: none;
}

.button {
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 20px;
  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  padding: 0
}

.button.paused {
  border-style: double;
  border-width: 0px 0 0px 20px;
}

.pauseicon {
  border-left: 10px solid #000;
  border-right: 10px solid #000;
  width: 10px;
  height: 25px;
}

.button:hover {
  border-color: transparent transparent transparent #404040;
}

.button:hover .text-1 {
  display: inline;
}

.pauseicon:hover~.text-2 {
  display: inline;
}

<div class="container">
  <button class='button' id="clicked" onclick="onToggle()"></button>
  <span class="text-1">Play</span>
  <span class="text-2">Pause</span>
</div>

Working Fiddle

CodePudding user response：

For toggle the icon or text on hover. I suggest to use the Font Awesome library.

Instead of the .png images because it using a class name to put an icon, and that make it easy to change the icon using jquery.

You can use jquery (.hover) https://api.jquery.com/hover/
In (.hover) function you can check if div has a class https://api.jquery.com/hasclass/
Then you can remove a class https://api.jquery.com/removeclass/ and add another one.

If you use Font Awesome, once you change the class name the icon will be changed.

Also if you can toggle the class name you can also change the text.

SAMPLE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <!--===============================================================================================-->
    <link href="../Assets/Fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <!--===============================================================================================-->
    <script src="../Scripts/JQuery/jquery-3.2.1.min.js"></script>
    <!--===============================================================================================-->
    
    
    <style>
        #icon {
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            font-size: 25px;
            display: flex;
            align-content: center;
            align-items: center;
            padding: 5px;
        }

        
    </style>
    
    <script>
        $(document).ready(function() {

            $("#icon").click(function() {
                if ($("#icon i").hasClass('fa-play')) {
                    $("#icon i").removeClass("fa-play").addClass("fa-pause");
                    $("#icon span").text('pause');
                } else {
                    $("#icon i").removeClass("fa-pause").addClass("fa-play");
                    $("#icon span").text('play');
                }
                

            });

        });
    </script>


</head>
<body>


    <div id="icon">

        <i class="fa fa-play" aria-hidden="true"></i>
        <span>Play</span>
        
        

    </div>


</body>
</html>