酷炫社交按钮（自定义 HTML 块）// 酷炫社交按钮（自定义 HTML 块）

<div class="widget_name"> <!-- You can change name of every widget you add-->

<div class=" ipsPad_half">
  
   <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<!-- If you add another button, you need to change the every number from css style, e.g.: .box4 need to change to .box5 to not overwrite-->
<style media="screen" type="text/css">
* {
font-family: 'Montserrat', sans-serif;
}
.box4{
  position: relative;
  cursor: pointer;
  width: 285px;
  height: 50px;
  background-color: #8918a7;
  overflow: hidden;
border-radius: 6px;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3);
transition: 400ms ease-in-out;
}

.shade4{
  position: relative;
  width: 148px;
  height: 100px;
  background: #561f76;
  opacity: 0.5;
  left: 200px;
  transform: rotate(135deg);
  top: -16px;
  transition: all ease-in-out 500ms;
}

.boxText4{
  position: absolute;
  font-size: 15px;
  font-weight: 700;
  color: white;
  left: 70px;
  top: 15px;
  transition: all ease-in-out 400ms;
}

.boxJoin4{
  z-index: 2;
  position: absolute;
  font-size: 17px;
  font-weight: 700;
  color: white;
  opacity: 0;
transform: scale(0.3);
  transition: all ease-in-out 400ms;
  left: 25px;
  top: 15px;
}

.boxLogo4{
  position: absolute;
  font-size: 38px;
color: #fff;
  top: 5px;
  margin-left: 10px;
  transition: all ease-in-out 400ms;
}

#boxArrow4{
  z-index: 2;
  color: white;
  font-size: 24px;
  position: absolute;
  left: 256px;
  top: 12px;
  transition: all ease-in-out 400ms;
}

.box4:hover {
box-shadow: 0 6px 8px 0 rgba(0,0,0,0.3);
}

.box4:hover .shade4{
  transform: rotate(90deg);
  height: 320px;
  top: -140px;
  left: 68px;
}

.box4:hover .boxText4{
  top: -48px;
}

.box4:hover .boxJoin4{
  opacity: 1;
transform: scale(1);
}

.box4:hover .boxLogo4{
  top: -48px;
}

.box4:hover #boxArrow4{
transform: translateX(60px);
}

</style>

<div class="box4">
<a href="https://forum.resursele.ro/faq/"> <!-- Link of button-->
   <i class="fa fa-question-circle boxLogo4"></i> <!-- Icon of button, it is run on Font Awesome Icons only if theme support fontawesome-->
  <!-- <img class="boxLogo4" src="https://steamstore-a.akamaihd.net/public/shared/images/header/globalheader_logo.png"> -->
  <span class="boxJoin4">HAVE A QUESTION?</span><!-- Hover text-->
  <span class="boxText4">F.A.Q</span><!-- Button text-->
  <i id="boxArrow4" class="fa fa-angle-right"></i>
  <div class="shade4">
  </div>
</a>
</div>
  
</div>
</div>