Cool Social Buttons(Custom HTML block)

CristiOprea13 · 05-02-2019, 10:14 PM

Preview:

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>

Cool Social Buttons(Custom HTML block)

Submitted by CristiOprea13, 05-02-2019, 10:14 PM, Thread ID: 120421