DECOTEXS: Title decorado

Derecha
Arriba
Izquierda
Abajo
Fade
Slide In
Slide Out
Zoom In
Zoom Out
Line Break
Always Visible

https://codepen.io/zkreations/full/NWNXYaE
https://www.zkreations.com/2016/06/before-tooltips-pure-css.html#usage
  
  
<style>  
  
   .tts {
  --tts-bg: #607D8B;
  --tts-duration: .5s;
  --tts-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  --tts-radius: 23em;
}
  .bcls-section {
            margin-top: 2.5em;
            padding-top: .5em;
            border-top: 1px #CCC solid;
        }
        
          .btn {
    font-size: 1rem;
    padding: 1rem 1rem;margin:3px 0;
    cursor: pointer;
    background: #efffee;
    border-radius: .25rem;
    color: black;
    text-align: center;
    width: 40%;
    display: inline;border:1px solid black;
}
 </style>   <link href="//cdn.jsdelivr.net/gh/zkreations/tooltips@3/tooltips.min.css" rel="stylesheet">

  <div class="row">
 <div class="demo-btn">
                <span class="btn tts tts-visible" aria-label="Forever and ever">Always Visible</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts" aria-label="Hacia arriba por defecto">Arriba</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts:left" aria-label="Hacia la izquierda">Izquierda</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts:right" aria-label="Hacia la derecha">Derecha</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts:down" aria-label="Hacia abajo">Abajo</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts" aria-label="Hola mundo!">Fade</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts tts-slideIn" aria-label="Hola mundo!">Slide In</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts tts-slideOut" aria-label="Hola mundo!">Slide Out</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts tts-zoomIn" aria-label="Hola mundo!">Zoom In</span>
            </div>
            <div class="demo-btn">
                <span class="btn tts tts-zoomOut" aria-label="Hola mundo!">Zoom Out</span>
            </div>
           
            
            <div class="demo-btn">
                <span class="btn tts tts-wrap" aria-label="Respetar saltos de linea">Line Break</span>
            </div>
</div>
viernes, 29 de julio de 2022

Title decorado
