title: Vue style slots individually
body: <p>I am new to vue (vue 2 in this case) and I am trying to understand how to use slots the best way possible. I have the following code:</p>
  <pre><code>   &lt;template&gt;
          &lt;div&gt;
              &lt;button class=&quot;btn {{ In here I would like to be able to choose between btn-one and btn-three}}&quot;&gt;
                  &lt;slot&gt;&lt;/slot&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/template&gt;
      
     &lt;style scoped&gt;
      .btn {
          margin: 20px 0px;
          height: 50px;
          text-align: center;
          width: 250px;
          cursor: pointer;
      }
  
      /* 
      ========================
          BUTTON ONE
      ========================
      */
  
      .btn-one {
          background-color: #FF6766;
          color: #FFF;
          transition: all 0.3s;
          position: relative;
      }
  
      .btn-one span {
          transition: all 0.3s;
      }
  
      .btn-one::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: 0;
          transition: all 0.3s;
          border-top-width: 1px;
          border-bottom-width: 1px;
          border-top-style: solid;
          border-bottom-style: solid;
          border-top-color: rgba(255,255,255,0.5);
          border-bottom-color: rgba(255,255,255,0.5);
          transform: scale(0.1, 1);
      }
  
      .btn-one:hover span {
          letter-spacing: 2px;
      }
  
      .btn-one:hover::before {
          opacity: 1; 
          transform: scale(1, 1); 
      }
  
      .btn-one::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          transition: all 0.3s;
          background-color: rgba(255,255,255,0.1);
      }
      
      .btn-one:hover::after {
          opacity: 0; 
          transform: scale(0.1, 1);
      }
  
  
          /* 
      ========================
          BUTTON THREE
      ========================
      */
      .btn-three {
          color: #FFF;
          transition: all 0.5s;
          position: relative;
          background-color: #66A182;;
      }
  
      .btn-three::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          background-color: rgba(255,255,255,0.1);
          transition: all 0.3s;
      }
  
      .btn-three:hover::before {
          opacity: 0 ;
          transform: scale(0.5,0.5);
      }
  
      .btn-three::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: 0;
          transition: all 0.3s;
          border: 1px solid rgba(255,255,255,0.5);
          transform: scale(1.2,1.2);
      }
  
      .btn-three:hover::after {
          opacity: 1;
          transform: scale(1,1);
      }
  
  &lt;/style&gt;
  </code></pre>
  <p>And I am trying to use it this way:</p>
  <pre><code>   &lt;template&gt;
      &lt;div class=&quot;page-margins&quot;&gt;
          &lt;h1&gt;This is to test slots&lt;/h1&gt;
  
          &lt;BaseButton&gt;
              &lt;div class=&quot;position&quot;&gt;
                  &lt;span class=&quot;button-span&quot;&gt;DOWNLOAD&lt;/span&gt;
                  &lt;span class=&quot;material-icons&quot;&gt;file_download&lt;/span&gt;        
              &lt;/div&gt;
          &lt;/BaseButton&gt;
  
          &lt;BaseButton&gt;
              &lt;div class=&quot;position&quot;&gt;
                  &lt;span class=&quot;button-span&quot;&gt;CANCEL&lt;/span&gt;
                  &lt;span class=&quot;material-icons&quot;&gt;close&lt;/span&gt;        
              &lt;/div&gt;
          &lt;/BaseButton&gt; 
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import BaseButton from '../components/BaseButton.vue'
  
      export default {
  
          components: {
              BaseButton
          }
          
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      .page-margins{
          margin: 100px 50px;;
      }
  
      .material-icons{
          font-size: 25px;
          letter-spacing: normal;
          display: inline-block;
          white-space: nowrap;
      }
  
      .position {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
      }
  
  &lt;/style&gt;
  </code></pre>
  <p>My question therefore is: how can I change from btn-one to btn-three because right now I am using btn-one and both buttons are red but I would like to use btn-three for the second one...</p>
  <p>Thank you in advance.</p>