cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<head>
<meta charset="utf-8"> 

</head>
<body>

<!--MAPSPRITE-ICONE VIA https://www.google.com/design/icons/-->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">

    <symbol id="icon-next" viewBox="0 0 24 24">
        <title>Next</title>
        <desc>Chevron Suite</desc>
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
    </symbol>
    <symbol id="icon-before" viewBox="0 0 24 24">
        <title>Next</title>
        <desc>Chevron Précédant</desc>
        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/>
    </symbol>
    <symbol id="icon-envoyer" viewBox="0 0 512 512">
        <title>Envoyer</title>
        <desc>Avion en papier</desc>
        <path d="M462 54.955L355.37 437.187 219.45 308.345 353.39 167l-179.53 124.074L50 260.974l412-206.02zM202.992 332.528v124.517l58.738-67.927-58.738-56.59z"/>
    </symbol>    

</svg>

<div class="post">
    <h1>Icone caché, affiche sur le hover</h1>
    <hr>
    <p>inspiration : https://codepen.io/ettrics/pen/RPbvGy</p>
    <p>Effet Hover : https://ianlunn.github.io/Hover/</p>
    <hr>
    <a class="link-toggle" href="#">
        <span>Lire la suite</span>
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-next">icone suite</use>
        </svg>
    </a>  
    <a class="link-toggle hvr-sweep-to-right" href="#">
        <span>Lire la suite</span>
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-next">icone suite</use>
        </svg>
    </a>      
    <hr>
    <a class="link-toggle" href="#">
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-before">icone suite</use>
        </svg>
        <span>Retour</span>
    </a>  
    <a class="link-toggle hvr-sweep-to-left" href="#">
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-before">icone suite</use>
        </svg>
        <span>Retour</span>
    </a>  
    <hr>
    <button class="link-toggle" type="submit" name="button" id="button">
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-envoyer">dessin avion papier</use>
        </svg>
        <span clas="txt">Envoyer &raquo;</span>
    </button>  
    <button class="link-toggle hvr-sweep-to-right" type="submit" name="button" id="button">
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-envoyer">dessin avion papier</use>
        </svg>
        <span clas="txt">Envoyer &raquo;</span>
    </button> 
</div>
</body>
</html>
            
          
!
            
              html{
    font-size: 62.5%;               /* 1rem = 10px */
}

p,a{
    font-size:1.4rem;               /* 14px */
}
.post
{
    color: #000;
}
    .post hr
    {
        width: 66%;
        height: 0.313em; /* 5px */
        border: none;
        background-color: currentColor;
        opacity: .2;
    }

/*-----------------------------------------------*\
/* LIEN AVEC ICONE CACHE                         *|
/*-----------------------------------------------*/
.link-toggle {
    display:inline-block;
    padding: 0.5882352941176471em;      /* 10px */
    border: solid #14759d 1px;
    outline: none;
    font-size: 1.7rem;                  /* 17px Parent du composant*/
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    color: #000;    
    background-color: transparent;
 
    -webkit-transition:color .5s,background 0.3s ease;    
    -moz-transition:color .5s,background 0.3s ease;    
    -ms-transition:color .5s,background 0.3s ease;    
    -o-transition:color .5s,background 0.3s ease;        
    transition: color .5s, background 0.3s ease;    
}

    .link-toggle svg,
    .link-toggle span{
        display: inline-block;
        vertical-align: middle;
    }

    .link-toggle svg{
        will-change: width, transform;    /* Previent le navigateur des changements sur element */
        width: 0;
        height:1.4705882352941175em;
        /* Couleur de remplissage du SVG (pas d'attribut de présentation dans les SVG */ 
        /* Le SVG hérite de la couleur définie dans son parent. .link-toggle, */
        /* force les enfants à hériter de la couleur de leur parent */
        fill:currentColor;

        border-radius: 50%;             /* Facultatif : rond */
        fill: red;                      /* couleur remplissage*/
        background: rgba(0,0,0,0.15);   /* Fond plus foncé */

        -webkit-transform: scale(0);    /* Echelle 0 */
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);     

        -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        -moz-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        -ms-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        -o-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .link-toggle span{
        font-family:Helvetica Neue,Helvetica,Arial,sans-serif;    
        line-height: 1.4705882352941175em;          /* 25px */
    }
    .link-toggle:focus {
        background: #cbacba;
    }  
    .link-toggle:active{
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
        transform: scale(0.9);
    }    
    .link-toggle:hover {
        text-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px;
        color:#fff;
        background: #cbacba;
        border-color:#341210;
    }  
    .link-toggle:hover svg{             /* Effet sur le SVG quand survol du lien */
        width: 1.4705882352941175em;    /* 25px taille donnée par font size de la classe parent*/
        fill:currentColor;              /* blanc comme son parent */

        -webkit-transform: scale(1);    /* Echelle 1 */
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
/*-----------------------------------------------*\
/* Effets de remplissage                         *|
/*-----------------------------------------------*/
/* https://ianlunn.github.io/Hover/ */
/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Sweep To Left */
.hvr-sweep-to-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
  color: white;
}
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

            
          
!
999px
Loading ..................

Console