atom-btn

atom-btn.markdown

atom-btn

A Pen by davidmars on CodePen.

License.

index.html

<style>
  @import url('https://fonts.cdnfonts.com/css/satoshi');
  body{
    font-family:monospace;
  }
  
  main{
    width:1200px;
    margin:40px auto; 
    padding:40px;
    outline: 1px dashed #bbb;
  }
  
  table{
    border-collapse:collapse;
  }
  th,td{
    border:1px solid #eee;
    padding:10px;
  }
  th{
    background-color:#eee;
    font-weight:900;
  }
  label{
    font-weight:bold;
    display:block;
    margin-bottom:0.5em;
  }
</style>

<main class="theme-i">
  <label>Icons reference</label>
  <a href="https://inatysco.github.io/icons/" target="_blank">
    https://inatysco.github.io/icons/
  </a>
  <br><br>
  
  <h2>Testeur</h2>
    <div style="display:flex;gap:20px;">
      <div>
        <label>Thème global</label>
        <select id="theme-selector" onchange="applyTest()">
          <option value="theme-i">.theme-i (inatysco)</option>
          <option value="theme-at">.theme-at</option>
        </select>
      </div>
      <div>
        <label>boutons size</label>
        <select id="size-selector" onchange="applyTest()">
          <option value="size-sm">.size-sm</option>
          <option value="size-m">défaut (vide)</option>
          <option value="size-lg">.size-lg</option>
          <option value="size-xl">.size-xl</option>
        </select>
      </div>
      <div>
        <label>buttons variant</label>
        <select id="variant-selector" onchange="applyTest()">
          <option value="">default (vide)</option>
          <option value="primary">.primary</option>
          <option value="primary-fill">.primary-fill</option>
          <option value="naked">.naked</option>
          <option value="cta">.cta</option>
          <option value="cta-at">.cta-gradient</option>
          <option value="cta-at">.cta-at</option>
          <option value="cta-i">.cta-i</option>
        </select>
      </div>
      <div> | </div>
      <div>
        <label>buttons icon</label>
        <select id="ico-selector" onchange="applyTest()">
          <option value="ghost">ghost</option>
          <option value="userCircle">userCircle</option>
        </select>
      </div>
  </div>
  
  <br>
  
  <div class="test-btns" style="background-color:#eee;padding:20px;border-radius:20px;display:flex;gap:20px;">
    <a     class="btn" href='#'>href de test</a>
    <button class="btn" href='#'>button de test</button>
    <a href="#" class="btn size-xl icon-right">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      icon right
    </a>
    <a href="#" class="btn icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      icon left
    </a>
    <a href="#" class="btn icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
    </a>
  </div>
  <br><br>
  
<table>
  <tr>
    <th>.btn</th>
    <th>.size-sm</th>
    <th>no size</th>
    <th>.size-lg</th>
    <th>.size-xl</th>
    <th>.primary</th>
    <th>.primary-fill</th>
    <th>.cta / .cta-gradient</th>
  <tr>
  <tr>
    <th></th>
    <td>
      <a href="#" class="btn size-sm">Hello World</a>    
    </td>
    <td>
      <a href="#" class="btn size-m">Hello World</a>    
    </td>
    <td>
      <a href="#" class="btn size-lg">Hello World</a>    
    </td>
    <td>
      <a href="#" class="btn size-xl">Hello World</a>    
    </td>
    <td>
      <a href="#" class="btn primary">Hello World</a>    
    </td>
    <td>
      <a href="#" class="btn primary-fill">Hello World</a>    
    </td>
    <td>
      <a href="#" class="btn cta">Hello World</a> 
      <br> <br>
      <a href="#" class="btn cta-gradient">Hello World</a> 
    </td>
  <tr>
  <tr>
    <th>.icon-solo</th>
    <td>
      <a href="#" class="btn size-sm icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-m icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-lg icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-xl icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>    
    </td>
    <td>
      <a href="#" class="btn primary icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>    
    </td>
    <td>
      <a href="#" class="btn primary-fill icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>    
    </td>
    <td>
      <a href="#" class="btn cta icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>  
      <br><br>
      <a href="#" class="btn cta-gradient icon-solo">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>  
    </td>
  <tr>
    <tr>
    <th>.icon-left</th>
    <td>
      <a href="#" class="btn size-sm icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-m icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-lg icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-xl icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn primary icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn primary-fill icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn cta icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>  
      <br><br>
      <a href="#" class="btn cta-gradient icon-left">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a> 
    </td>
  <tr>
     <tr>
    <tr>
    <th>.icon-right</th>
    <td>
      <a href="#" class="btn size-sm icon-right">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-m icon-right">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-lg icon-right">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn size-xl icon-right">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn primary icon-right">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn primary-fill icon-right">
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
        Hello
      </a>    
    </td>
    <td>
      <a href="#" class="btn cta icon-right">
        Hello
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a> 
      <br><br>
      <a href="#" class="btn cta-gradient icon-right">
        Hello
        <svg viewBox="0 0 192 192"><use href="#ghost"/></svg>
      </a>  
    </td>
  <tr>
</table>
  
</main>



<svg viewBox="0 0 192 192">
  <defs>
    <g id="ghost">
      <path d="M72.5 62.539c1.1 0 1.9.9 1.9 1.9v19.8c0 1.1-.9 1.9-1.9 1.9h-8c-1.1 0-1.9-.9-1.9-1.9v-19.8c0-1.1.9-1.9 1.9-1.9h8Zm55.1 0c1.1 0 1.9.9 1.9 1.9v19.8c0 1.1-.9 1.9-1.9 1.9h-8c-1.1 0-1.9-.9-1.9-1.9v-19.8c0-1.1.9-1.9 1.9-1.9h8Z"></path>
      <path d="M97.605 3.285c-43.2-.9-78.505 34.4-78.505 77.5v79.3c0 10.8 8.7 19.5 19.5 19.6 7.1 0 13.9-3.1 18.5-8.5.8-1.1 1.8-2.1 2.9-2.9 5.7-4.1 13.6-2.8 17.7 2.9.9 1 1.8 2 2.8 2.8 10.2 8.6 25.5 7.4 34.1-2.8.8-1.1 1.7-2 2.8-2.8 5.7-4.1 13.6-2.9 17.7 2.8 4.6 5.3 11.5 8.4 18.5 8.5h.1c10.7-.1 19.3-8.9 19.3-19.6v-80.9c0-41.9-33.258-75-74.958-75.9h-.437Zm55.595 164.7c-4-.1-7.7-2.2-10.2-5.4-.9-1-1.8-2-2.8-2.8-10.2-8.6-25.5-7.4-34.1 2.8-.8 1.1-1.8 2.1-2.9 2.9-5.7 4.1-13.6 2.8-17.7-2.9-.8-1-1.7-1.9-2.7-2.7-10.2-8.7-25.5-7.5-34.2 2.7-2.4 3.3-6.1 5.3-10.1 5.4h-.2c-4.2 0-7.5-3.6-7.4-7.8v-80.9c0-35.9 29.1-64.1 65.1-64.1s65 28.1 65 64.1v81.1c0 4.2-3.226 7.598-7.426 7.598l-.374.002Z">
      </path>
    </g>
    <g id="userCircle">
      <path d="M41.6 165.1c.4.4.9.7 1.4 1 31.3 23.9 74.7 23.9 106 0 .5-.3 1-.6 1.4-1 38.2-30 44.8-85.4 14.8-123.6C135.1 3.3 79.8-3.3 41.6 26.8s-44.8 85.4-14.8 123.6c4.4 5.4 9.3 10.4 14.8 14.7.1 0 0 0 0 0zm54.4 6.1c-15.1 0-29.9-4.6-42.4-13.1 8.4-23.4 34.3-35.6 57.7-27.1 6.2 2.2 11.9 5.8 16.6 10.5 4.7 4.7 8.2 10.4 10.4 16.6-12.4 8.5-27.2 13.1-42.3 13.1M68.1 87.5c0-15.4 12.5-27.9 27.9-27.9s27.9 12.5 27.9 27.9-12.5 27.9-27.9 27.9c-15.4 0-27.9-12.5-27.9-27.9M96 21c41.4 0 75.1 33.5 75.1 75 0 20.1-8 39.3-22.3 53.5-5.8-12.9-16.1-23.2-29-28.9 18.3-13.1 22.5-38.6 9.4-56.9s-38.6-22.5-56.9-9.4-22.5 38.6-9.4 56.9c2.6 3.6 5.7 6.7 9.3 9.3a57.91 57.91 0 0 0-29 28.9c-29.5-29.1-29.8-76.6-.7-106.1C56.6 29 75.9 21 96 21z"></path>
    </g>
    </defs>

</svg>

script.js

let $testBtns=document.querySelectorAll(".test-btns .btn");
let $icos=document.querySelectorAll(".btn svg use");
let $main=document.querySelector("main");
function applyTest(){
  
  //le thème
  let theme=document.getElementById("theme-selector").value;
  $main.classList.remove(...$main.classList);
  $main.classList.add(theme);
  
  //les icones
  let ico=document.getElementById("ico-selector").value;
  $icos.forEach(el => {
    el.setAttribute("href", "#"+ico)
  });
  
  //les boutons
  let toRemove=[];
  $testBtns.forEach(el => {
    //reset le btn
    el.classList.forEach(cl=>{
      if(['btn','icon-right','icon-left','icon-solo'].indexOf(cl) === -1 ){
        toRemove.push(cl);
      }
    });
    toRemove.forEach(cl=>{
        el.classList.remove(cl);
      }
    )
    //applique les choix
    let size=document.getElementById("size-selector").value;
    let variant=document.getElementById("variant-selector").value;
    
    el.classList.add(size);
    if(variant){
      el.classList.add(variant);
    }
    }
  );
  

}

applyTest();

style.scss

body{
  // inatysco
  --i-700:#5e00ff;
  --i-600:#a774ff;
  --i-300:#ab94ff;
  --i-gradient:linear-gradient(to right, #5e00ff, #a774ff 50%, #ab94ff);
  
  // atom transfer  
  --at-700:#d00072;
  --at-600:#ff576f;
  --at-300:#ff8d9d;
  --at-gradient:linear-gradient(to right, #d06dec, #ff576f 50%, #fb9e54);
  
  //neutres
  --neutral-400:#45506c;
  --neutral-200:#8a96ae;
  --neutral-100:#c7cdde;
  --neutral-50:#eceef5;
  --neutral-25:#f8f9fc;
  
  .theme-at{
    --primary-700:var(--at-700);
    --primary-600:var(--at-600);
    --primary-300:var(--at-300);
    --primary-gradient:var(--at-gradient);
    --primary:var(--primary-600);
  }
  .theme-i{
    --primary-700:var(--i-700);
    --primary-600:var(--i-600);
    --primary-300:var(--i-300);
    --primary-gradient:var(--i-gradient);
    --primary:var(--primary-600);
  }
  
}



.btn{
  //font
  font-size:var(--fs);
  font-weight:var(--fw);
  //boxing
  box-sizing:border-box;
  height:var(--h);
  padding-left:var(--padd);
  padding-right:var(--padd);
  //colors
  color:var(--fg);
  background-color:var(--bg);
  border:1px solid var(--fg);
  //ils ont tous un radius de toute façon.
  border-radius:500px;
  box-shadow:var(--shadow);
}



//default variables
.btn{
  cursor:pointer;
  white-space:nowrap;
  font-family: 'Satoshi', sans-serif;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  
  //shadow
  --shadow:none;
  
  
  //font
  --fs:16px;
  --fw:500;
  
  //colors
  --fg:#000;
  --bg:#fff;
   &:hover{
      --fg:#111;
      --bg:#eee;
    }
  
  &.primary{
    --fg:var(--primary);
    --bg:#fff;
    &:hover{
      --fg:#fff;
      --bg:var(--primary);
    }
  }
  
  &.primary-fill{
    --fg:#fff;
    --bg:var(--primary);
    &:hover{
      --fg:var(--primary);
      --bg:#fff;
    }
  }
  &.naked{
    --bg:transparent;
    border-color:var(--bg);
    &:hover{
      --bg:rgba(128,128,128,0.1);
    }
  }
  &[class*="cta"]{
    border-color:transparent;
    --shadow:0 35px 45px #133a5166;
    &[class*="cta-"]{
      --fg:#fff;
    }
    &.cta-gradient{
      background-image:var(--primary-gradient);
    }
    &.cta-at{
      background-image:var(--at-gradient);
    }
    &.cta-i{
      background-image:var(--i-gradient);
    }
  }
  

  //size
  &.size-sm{
    --fs:12px;
    --padd:20px;
    --h:30px;
    --ico:16px;
  }
  
  --padd:20px;
  --h:40px;
  --ico:20px;
  
  &.size-lg{
    --fs:18px;
    --padd:30px;
    --h:50px;
  }
  
  &.size-xl{
    --fs:18px;
    --padd:40px;
    --h:60px;
  }
  
  
  //icons
  
  &[class*='icon-']{
     svg{
      width:var(--ico);
      height:var(--ico);
      flex-grow:0;
      flex-shrink:0;
      fill:currentcolor;
      stroke:currentColor;

    }
  }

  &.icon-solo{
    overflow:hidden;
    flex-grow:0;
    flex-shrink:0;
    width:var(--h);
    max-width:var(--h);
    padding:0;
  }
 
  &.icon-left,&.icon-right{
    gap: calc( var(--padd) * 0.5 );
    overflow:hidden;
  }
  &.icon-left{
    padding-left:calc( var(--padd) * 0.5 );
    >svg{
      //order:0;
    }
  }
  
  &.icon-right{
    padding-right:calc( var(--padd) * 0.5 );
    >svg{
      order:2;
    }
  }
  
}