buttonExpand

by murgiaMarco

HTML

<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
</head>
<body>
<div style="display:block; height:300px; padding:10px;background-color:#e4e4e4" class="">
  <div style="display:block; height:56px;background-color:#008db7; overflow:hidden;" class="">
    
    <div style="display:inline-block; height:56px; width:180px;background-color:#007db7; float:right; overflow:visible;" class="">
      <div style="display:flex; height:56px; float:right;" class="">
        <div class="btnContainer">
           <div class="customGPlusSignIn" onclick="sendAlert()" onmouseover="expand(this)" onmouseout="shrink(this)">
              <span class="icon" style="background-image: url('http://euroveneta.it/assets/plugins/socicon/svg/socicon_facebook.svg');"></span>
              <span class="buttonText">Notifiche Documenti</span>
          </div>
          <div class="icon2">
              <span class="buttonText2">9</span>
           </div>
        </div>
        <div class="btnContainer">
           <div class="customGPlusSignIn" onclick="sendAlert()" onmouseover="expand(this)" onmouseout="shrink(this)">
              <span class="icon" style="background-image: url('http://euroveneta.it/assets/plugins/socicon/svg/socicon_youtube.svg');"></span>
              <span class="buttonText">No</span>
          </div>
          <div class="icon2">
              <span class="buttonText2">99+</span>
           </div>
        </div>
        <div class="btnContainer">
           <div class="customGPlusSignIn" onclick="sendAlert()" onmouseover="expand(this)" onmouseout="shrink(this)">
              <span class="icon"></span>
              <span class="buttonText">Non ti aspettavi che la sctitta qui dentro fosse così lunga</span>
          </div>
          <div class="icon2">
              <span class="buttonText2">99+</span>
           </div>
       ...

CSS

div.btnContainer {
          padding: 6px;
/* background-color:green; */
display:inline-block;
             float:right;
             position:relative;

      }
      
   div.btnContainer .icon2 {
animation-name: iconindexout;
                 animation-duration:1s;
      }
 
 div.customGPlusSignIn {
      display: inline-block;
      background: white;
      color: #444;
      border-radius: 21px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap;
            overflow:hidden;
             float:right;
             transition: width 1s;
             transition-timing-function: ease-in-out;
             position:relative;
             right:3px;
             
                animation-name: out;
                 animation-duration:3s;


    }
    div.customGPlusSignIn:hover {
      cursor: pointer;
      animation: move 1s;
      animation-fill-mode: forward;
      animation-delay: 0s;
      z-index:3;
      /* z-index:300; */
    }
    
    div.btnContainer:hover .icon2 {
      z-index: 4;
      animation: iconindex 1s;
    }
    
    @keyframes move {
      0 {z-index:1;opacity:1}
      1% {z-index:3;opacity:1}
      100% {z-index:3;opacity:1}

    }
    
    @keyframes iconindex {
      0 {z-index:2}
      1% {z-index:4}
      100% {z-index:4}
    }
    
    @keyframes iconindexout {
      0 {z-index:2}
      1% {z-index:4}
      100% {z-index:4}
    }
    
     @keyframes out {
    0% {z-index:3;opacity:1}
    1% {z-index:3;opacity:1}
    100 {z-index:1;opacity:1}
      
    }


    span.label {
      font-family: serif;
      font-weight: normal;
    }
    span.icon {
      background-repeat: no-repeat;
      /* background-size: contain; */
      background-size:100% 100%;
      display: inline-block;
      vertical-align: middle;
      width: 42px;
      height: 42px;
      position:relative;
      left:0px;
      }
      
       div.icon2 {
      background:red;
      display: inline-block;
      vertical-align:...

JavaScript

/* document.getElementsByClassName("customGPlusSignIn")[0].style.maxWidth = document.getElementsByClassName("customGPlusSignIn")[0].offsetWidth+"px";
document.getElementsByClassName("customGPlusSignIn")[1].style.maxWidth = document.getElementsByClassName("customGPlusSignIn")[0].offsetWidth+"px";
document.getElementsByClassName("customGPlusSignIn")[0].style.width = "42px";
document.getElementsByClassName("customGPlusSignIn")[1].style.width = "42px";
 */
/* document.getElementById("customBtn").style.width = "42px";
 */
 
var index;
var a = document.getElementsByClassName("customGPlusSignIn");
for (index = 0; index < a.length; ++index) {
    console.log(document.getElementsByClassName("customGPlusSignIn")[index]);
    myFunction(document.getElementsByClassName("customGPlusSignIn")[index]);
}


function myFunction(item) {
  item.style.maxWidth = item.offsetWidth+"px";
	item.style.width = "42px";
}
 
function sendAlert() {
alert("Hai cliccato sul bottone!");
}

function expand(x) {
  x.style.width = x.style.maxWidth;
  
  console.log(x.parentNode.getElementsByClassName("icon2")[0]);
  /* x.parentNode.getElementsByClassName("icon2")[0].style.zIndex= "4" */;

  
}

function shrink(x) {
  x.style.width = "42px";
  /* x.parentNode.getElementsByClassName("icon2")[0].style.zIndex= "2" */;

}