![[Image: DhlZbHZ.png]](https://i.imgur.com/DhlZbHZ.png)
Live preview: https://forum.resursele.ro (in sidebar)
HTML Code:
Code:
<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>