(#1)   Supervisor

"> Miko 38711722805/02/2009My dream is you.https://i.imgur.com/Nh2lbrq.png   Posts : 387 Puntos : 1172 Agradecido : 28 Registrado : 05/02/2009 Mi Título : My dream is you. Background (Beta) : https://i.imgur.com/Nh2lbrq.png

[MOD] Google Material floating button - 3/7/2019, 10:01 am Descripción : Hoy me complace compartir con ustedes cómo tener un botón flotante para Nuevo tema y Responder tema Códigos HTML: En primer lugar, coloque esta fuente de Google antes de {JQUERY_PATH} en overall_header template Código:   <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">   <script src="{JQUERY_PATH}" type="text/javascript"></script> Paso 2: busque y elimine completamente el contenido dentro de estas etiquetas que ve en viewforum_body y viewtopic_body (opcional) Código: <!-- BEGIN switch_user_authreply --> ... <!-- END switch_user_authreply -->   <!-- BEGIN switch_user_authpost --> ... <!-- END switch_user_authpost --> Paso 3: ponga este código HTML en cualquier lugar en viewforum_body y viewtopic_body Código: <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> Paso 4: Agrega esto a CSS Código: .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)} } Optimizar tu CSS : Elige No Step 5: Guardar & Publicar DEMO: Live | Prueba Nota: en caso de que su sitio use una función de blog, repita el paso 3, luego coloque el código HTML en la plantilla viewcomment_body Fuente: Material floating button CSS Me gustaNo me gusta