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 http://iconmonstr.com/paper-plane-icon/-->

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

    <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>
    <symbol id="icon-telrond" viewBox="0 0 1024 1024">
        <title>Téléphone</title>
        <desc>Combiné téléphone</desc>
        <path class="path1" d="M704 640c-64 64-64 128-128 128s-128-64-192-128-128-128-128-192 64-64 128-128-128-256-192-256-192 192-192 192c0 128 131.5 387.5 256 512s384 256 512 256c0 0 192-128 192-192s-192-256-256-192z"></path>
    </symbol>
</svg>

<div class="post">
    <h1>Composants</h1>
    <h2>Bouton Envoyer</h2>
    <hr>
    <button class="bt-envoyer" type="submit" name="button" id="bt-envoyer">
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-envoyer">dessin avion papier</use>
        </svg>
        <span clas="txt">Envoyer &raquo;</span>
    </button>
    <hr>
    <h2>Lien Appeller</h2>  
    <p>Lien stylisé en bouton : Parent : Inline-block , enfants : Inline-block + class SVG  : dring - href=tel + micro format</p>
    <hr>
    <a class="call dring" href="tel:+330102030405" title="Appellez nous" itemscope itemtype="http://schema.org/LocalBusiness">
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-telrond">dessin telephone</use>
        </svg>
        <span class="txt" itemprop="telephone">01.02.03.04.05</span>
    </a>  
    </hr>
    <a class="call dring" href="tel:+330602030405" title="Appellez nous" itemscope itemtype="http://schema.org/LocalBusiness">
        <svg aria-hidden="true" role="presentation">
            <use xlink:href="#icon-telrond">dessin telephone</use>
        </svg>
        <span class="txt" itemprop="telephone">06.02.03.04.05</span>
    </a>
    </hr>    
</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;
    }

/*-----------------------------------------------*\
/* BOUTON ENVOYER                                *|
/*-----------------------------------------------*/
.bt-envoyer {
    display:block;
    margin-left: 150px;
    padding: 0.5882352941176471em;      /* 10px */
    border: solid #14759d 2px;
    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;    
}

    .bt-envoyer svg,
    .bt-envoyer span{
        display: inline-block;
        vertical-align: middle;
    }

    .bt-envoyer svg{
        width: 1.4705882352941175em;    /* 25px taille donnée par font size de la classe parent*/
        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. .bt-envoyer, */
        /* force les enfants à hériter de la couleur de leur parent */
        fill:currentColor;
        fill-opacity:.5;
    }
    .bt-envoyer span{
        font-family:Helvetica Neue,Helvetica,Arial,sans-serif;    
        padding-left: 0.5882352941176471em;         /* 10px */
        line-height: 1.4705882352941175em;          /* 25px */
    }
    .bt-envoyer:focus,
    .bt-envoyer:active,
    .bt-envoyer:hover{
        color:#eeeeee;
        background: #004d40;
        border-color:#80cbc4;
    }  
    .bt-envoyer: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);
    }    
    .bt-envoyer:hover {
        text-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px;

    }  
    .bt-envoyer:hover svg{
        fill-opacity:1;
        fill:currentColor;
    }
/*-----------------------------------------------*\
/* LIEN ENVOYER                                  *|
/*-----------------------------------------------*/
.call {
    display:inline-block;
    padding: 0.5882352941176471em;      /* 10px */
    width: 9.117647058823529em;         /* 153px */
    border: solid #14759d 2px;
    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;    
}

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

    .call svg{
        width: 1.4705882352941175em;    /* 25px taille donnée par font size de la classe parent*/
        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. .bt-call, */
        /* force les enfants à hériter de la couleur de leur parent */
        fill:currentColor;
        fill-opacity:.5;
    }
    .call span{
        font-family:Helvetica Neue,Helvetica,Arial,sans-serif;    
        padding-left: 0.5882352941176471em;         /* 10px */
        line-height: 1.4705882352941175em;          /* 25px */
    }

    .call: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);
    }    
    .call:hover {
        text-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px;
        border-color:#341210;      
        background: #cbacba;
    }  
    .call:hover svg{ /* inutile si class dring */
        fill-opacity:1;
        fill:currentColor;
    }

/* Animation du SVG sur les éléments avec la classe : dring */
/* executé sur le hover du lien */
a.dring:hover svg{ /* lorsque que l'on passe sur la div on change la couleur de l'icone du téléphone et on l'anime */
  fill:#e65100;

  -webkit-animation: flash 1s alternate ease infinite;
  -moz-animation: flash 1s alternate ease infinite;
  -ms-animation: flash 1s alternate ease infinite;
  -o-animation: flash 1s alternate ease infinite;
  animation: flash 1s alternate ease infinite;
}        
/* Via : https://github.com/daneden/animate.css */
@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}


/*-----------------------------------------------*\
/* MEDIA QUERY: ;                                *|
/*-----------------------------------------------*/
/* Moins de 640px */
/* bouton centré */
@media screen and (max-width: 639px) {
    .bt-envoyer {
        margin: 0 auto;
    }
    .call {
        margin: 0 auto;
    }  
}
@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:640px) {}
@media screen and (min-width:641px) {}
            
          
!
999px
Loading ..................

Console