[CSS] Google Material floating button

Hello, it's me again

Today I glady share with you how to have a floating button for New topic and Reply topic


First of all, put this Google Font before {JQUERY_PATH} in overall_header template

Code:

   <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
   <script src="{JQUERY_PATH}" type="text/javascript"></script>

Step 2: Search and completely remove the content inside these tags you see in viewforum_body and viewtopic_body (optional)

Code:

<!-- BEGIN switch_user_authreply -->
...
<!-- END switch_user_authreply -->

<!-- BEGIN switch_user_authpost -->
...
<!-- END switch_user_authpost -->


Step 3: Put this HTML code anywhere in viewforum_body and viewtopic_body

Code:

<div id="cfr">
   <!-- BEGIN switch_user_authreply -->
   <div class="nd2 nds">
      <a href="{U_POST_REPLY_TOPIC}" class="qb blue" title="{L_POST_REPLY_TOPIC}" rel="nofollow"><i class="material-icons">reply</i></a>
   </div>
   <!-- END switch_user_authreply -->
   <!-- BEGIN switch_user_authpost -->
   <div class="nd1 nds">
      <a href="{U_POST_NEW_TOPIC}" class="qb red" title="{L_POST_NEW_TOPIC}" rel="nofollow"><i class="material-icons">add</i></a>
   </div>
   <!-- END switch_user_authpost -->
   <div id="floating-button" class="qb white">
      <span class="plus">+</span>
      <span class="letter edit"><i class="material-icons">close</i></span>
   </div>
</div>

Step 4: Add this to CSS

Code:

.red{background:#dd4b39!important}
.blue{background:#4285f4!important}
.red, .blue{color:#FFF!important}
.white{background:#FFF!important;color:#3689d1!important}
.qb{display:block;position:fixed;right:15px;bottom:15px;width:50px;height:50px;border-radius:100%;text-align:center;line-height:50px;font-size:25px;z-index:100;cursor:pointer}
.qb i{margin-top:12px}
.plus{animation:plus-out .3s;transition:all .3s}
.edit{opacity:0;transform:rotateZ(-70deg);transition:all .3s;animation:edit-out .3s}
#floating-button{box-shadow: 0px 2px 5px #666}
#cfr{position:fixed;bottom:0;right:0;z-index:95}
#cfr:hover{height:50%;width:100px}
#cfr:hover .plus{animation:plus-in .15s linear;animation-fill-mode:forwards}
#cfr:hover .edit{animation:edit-in .2s;animation-delay:.1s;animation-fill-mode:forwards}
#cfr:hover .nds{animation:bounce-nds .1s linear;animation-fill-mode:forwards}
#cfr:hover .nd2{animation-delay:.08s}
#cfr:hover .nd3{animation-delay:.15s}
#cfr:hover .nd4{animation-delay:.2s}
.nds{display:block;transform:scale(0);position:fixed;right:0;animation-fill-mode:forwards}
.nd1{bottom:60px;animation-delay:.2s;animation:bounce-out-nds .3s linear}
.nd2{bottom:120px;animation-delay:.15s;animation:bounce-out-nds .15s linear}
.nd3{bottom:180px;animation-delay:.1s;animation:bounce-out-nds .1s linear}
.nd4{bottom:240px;animation-delay:.08s;animation:bounce-out-nds .1s linear}
.letter{position:absolute;left:0;right:0;top:0;bottom:0}
@keyframes edit-in {
from{opacity:0;transform:rotateZ(-70deg)}
to{opacity:1;transform:rotateZ(0deg)}
}
@keyframes edit-out {
from{opacity:1;transform:rotateZ(0deg)}
to{opacity:0;transform:rotateZ(-70deg)}
}
@keyframes plus-in {
from{opacity:1;transform:rotateZ(0deg)}
to{opacity:0;transform:rotateZ(180deg)}
}
@keyframes plus-out {
from{opacity:0;transform:rotateZ(180deg)}
to{opacity:1;transform:rotateZ(0deg)}
}
@keyframes bounce-nds {
from{opacity:0}
to{opacity:1;transform:scale(1)}
}
@keyframes bounce-out-nds {
from{opacity:1;transform:scale(1)}
to{opacity:0;transform:scale(0)}
}

- Optimize your CSS : choose No

Step 5: Save and Publish

DEMO : Live | Test

Note : In case your site using a blog feature, repeat step 3, then put the HTML code in viewcomment_body template

Source : Material floating button CSS

Very nice my friend ! I will test it and let u know
I suppose you can manage the section that the new topic and reply button directs?

I look forward to hearing good news from you soon, my dear

Don't forget to delete the content insde these tags. Unless new floating buttons won't work properly

Code:

<!-- BEGIN switch_user_authreply -->
<!-- END switch_user_authreply -->
 
<!-- BEGIN switch_user_authpost -->
<!-- END switch_user_authpost -->

ok i add and remove the elements
i cannot see any reply and new topic button and your plus button appeared but its not clickable

Could you please send me a link so I can see it more clear? And your template in a tag code also

Thank you

its not in my main forum
i have a test forum with basic templates and no java here
http://test4test.forumgreek.com/
i will send you the test account

Spoiler:

Try to deactivate Optimize your CSS, it should work

   thanks

Hello @SarkZKalie,

This is a great project.
I do have two questions / suggestions:

1. Why not have both the reply and new topic buttons and this new effect at the same time? Does any of the codes interfere with this situation or it's simply how you did this? Because me personally, I would like to add this but not if it will remove the old New Topic and Post Reply.
   
2. These buttons, (not the plus one, the others) can't they be placed outside the screen width at first? Because upon loading a topic you can see them at first and then they hide immediately. Those seconds that they show up can they be gone somehow?

Note: I haven't had time to check on the codes, just asking my thoughts and suggestions here!

Regards.

Hello @TheCrow

• 1. You can have both of them, it doesn't matter. Personally, I only remove some unnecessary element that can cause slow page loading. For example : image buttons
  
  
• 2. Simply search and remove animation:bounce-out-nds x linear in CSS
  

  Code:

  .nd1{bottom:60px;animation-delay:.2s;animation:bounce-out-nds .3s linear}
.nd2{bottom:120px;animation-delay:.15s;animation:bounce-out-nds .15s linear}
.nd3{bottom:180px;animation-delay:.1s;animation:bounce-out-nds .1s linear}
.nd4{bottom:240px;animation-delay:.08s;animation:bounce-out-nds .1s linear}

@SarkZKalie,

For number one, this only concerns image buttons that may cause loading issues?
And just so I am 100% sure, these are not images (the new ones) right? They are simply fonts of Google like FontAwesome, right?

Regards!