Elementor – Social Sharing or Menu Reveal Buttons – Animated

HTML Code to add to a HTML Widget

<button>
<span>Button</span>
<ul>
<li>
  <a href="https://twitter.com/ImranWebsites">
    <i class='fa fa-twitter'></i>
      </a>
  
</li>
<li>
  <a href="https://Websquadron.co.uk">
    <i class='fa fa-home'></i>&nbsp&nbspHome
      </a>
  
</li>
<li>
  <a href="https://twitter.com/ImranWebsites">
    <i class='fa fa-facebook'></i>
      </a>
  
</li>
<li>
  <a href="https://twitter.com/ImranWebsites">
    <i class='fa fa-instagram'></i>
      </a>
  
</li>

</ul></button>

Add to the Custom CSS for the HTML

button {
 --btn-color: #0000ff;
 position: relative;
 padding: 16px 80px;
 font-family: Roboto, sans-serif;
 font-weight: 500;
 font-size: 16px;
 line-height: 1;
 color: white;
 background: none;
 border: none;
 outline: none;
 overflow: hidden;
 cursor: pointer;
 filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));
 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

button::before {
 position: absolute;
 content: "";
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 background: var(--btn-color);
 border-radius: 25px;
 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

button span,
button span span {
 display: inline-flex;
 vertical-align: middle;
 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

button span {
 transition-delay: 0.05s;
}

button span:first-child {
 padding-right: 7px;
}

button span span {
 margin-left: 8px;
 transition-delay: 0.1s;
}

button ul {
 position: absolute;
 top: 50%;
 left: 0;
 right: 0;
 display: flex;
 margin: 0;
 padding: 0;
 list-style-type: none;
 transform: translateY(-50%);
}

button ul li {
 flex: 1;
}

button ul li a {
 display: inline-flex;
 vertical-align: middle;
 transform: translateY(55px);
 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

button ul li a:hover {
 opacity: 0.5;
}

button:hover::before {
 transform: scale(1.2);
}

button:hover span,
button:hover span span {
 transform: translateY(-55px);
}

button:hover ul li a {
 transform: translateY(0);
}

button:hover ul li:nth-child(1) a {
 transition-delay: 0.15s;
}

button:hover ul li:nth-child(2) a {
 transition-delay: 0.2s;
}

button:hover ul li:nth-child(3) a {
 transition-delay: 0.25s;
}

button:hover ul li:nth-child(4) a {
 transition-delay: 0.3s;
}