Loading

Button Explorations

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Button Explorations</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://use.typekit.net/vrt7jdx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='css/pjxgxz.css'>
<link rel='stylesheet prefetch' href='https://codepen.io/zaneriley/pen/2a4328df547d36df2fd314332a14d716?editors=110'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<main>
  <section class="container pressed watermelon">
    <div class="left"><img class="logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZpbmFsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwMi43IDEwMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDIuNyAxMDIuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUI0OTM0IiBkPSJNNDMuMSwxMDAuOWMtMTYuNiwwLTQyLjYsMC00Mi42LDBWMS44YzAsMCwyMy45LDAsMzguOCwwYzEyLjgsMCwyMi45LDExLjMsMjIuOSwyNC43DQoJYzAsOS4zLTMuOCwxNy4yLTEyLDIwLjZ2MC4zYzkuNywwLjIsMjAuOCwxMiwyMC44LDI0LjdDNzAuOSw4OS42LDU3LjMsMTAwLjksNDMuMSwxMDAuOXogTTMyLjIsMTcuNGMtNSwwLTEzLjUsMC0xMy41LDB2MjQuMw0KCWMwLDAsOC40LDAsMTMuMSwwYzYuNCwwLDExLjItNS4yLDExLjItMTIuOUM0My4xLDIyLjksMzguNiwxNy40LDMyLjIsMTcuNHogTTM3LjEsNTcuMWMtNSwwLTE4LjQsMC0xOC40LDB2MjguNWMwLDAsMTMuNiwwLDE4LjMsMA0KCWM3LDAsMTQuMS00LjIsMTQuMS0xNC40QzUxLjEsNjEuOCw0My42LDU3LjEsMzcuMSw1Ny4xeiIvPg0KPHBhdGggZmlsbD0iI0ZBRDgxMyIgZD0iTTIyMSwxMDEuOWMtMjcsMC00Ny45LTIzLTQ3LjktNTBjMC0yNy43LDIxLjMtNTEuNSw0OS01MS41YzEyLjEsMCwyNC40LDYuMSwyNC40LDYuMXYyMC44DQoJYzAsMC05LTkuMi0yNC40LTkuMmMtMTcuMiwwLTMwLDE1LjEtMzAsMzIuMmMwLDE3LjcsMTIuMywzMy44LDMwLDMzLjhjMTAuNCwwLDE3LjktNC4yLDI0LjktOS4xYzAsMCwwLDEzLjgsMCwyMC4xDQoJQzI0NC4yLDk3LjIsMjMzLjcsMTAxLjksMjIxLDEwMS45eiIvPg0KPHBvbHlnb24gZmlsbD0iIzlGRDVCQSIgcG9pbnRzPSIxNTkuMSw2MS4zIDE1OS4xLDQyLjUgMTMwLjEsNDIuNSAxMzAuMSwxMy41IDExMS4zLDEzLjUgMTExLjMsNDIuNSA4Mi4zLDQyLjUgODIuMyw2MS4zIA0KCTExMS4zLDYxLjMgMTExLjMsOTAuMyAxMzAuMSw5MC4zIDEzMC4xLDYxLjMgIi8+DQo8cGF0aCBmaWxsPSIjQUFBQUFBIiBkPSJNMzM1LjcsMjAuM2MtNC4zLTYuOC0xMC4zLTExLjItMTkuMy0xMS4yYy0xMC4yLDAtMTcuOSw4LjItMTcuOSwxOC4xUzMwOCw0MS4zLDMxNS43LDQ1bDE4LjEsOS40DQoJYzcuMiw0LjUsMTAuOCwxMC4zLDEwLjgsMTguOWMwLDE1LjctMTQuNCwyNy42LTI5LjcsMjcuNmMtMTMuMiwwLTIzLjUtOC4yLTI4LTIwLjRsNS4zLTIuNGM0LDEwLjEsMTEuNSwxNy4xLDIyLjksMTcuMQ0KCWMxMi41LDAsMjMuNC05LjgsMjMuNC0yMi40YzAtMTAuNy0xMS0xNS4yLTE5LjEtMTkuM2wtMTcuMS05LjFjLTYuMy0zLjktOS44LTkuNC05LjgtMTdjMC0xNC4xLDEwLjEtMjQsMjQuMy0yNA0KCWM5LjYsMCwxOC42LDUuMiwyMy4yLDEzLjNMMzM1LjcsMjAuM3oiLz4NCjxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik00MjYsNDVWNC43aDZ2OTQuOWgtNnYtNDloLTU3Ljd2NDloLTZWNC43aDZWNDVINDI2eiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU0MS43LDUyLjFjMCwyNi43LTIwLjYsNDguNy00Ny4zLDQ4LjdjLTI2LjcsMC00Ny4zLTIyLTQ3LjMtNDguN2MwLTI2LjcsMjAuNC00OC43LDQ3LjMtNDguNw0KCUM1MjEuMSwzLjQsNTQxLjcsMjUuNSw1NDEuNyw1Mi4xeiBNNDUzLjIsNTIuMWMwLDIzLjQsMTcuNiw0My4xLDQxLjIsNDMuMWMyMy41LDAsNDEuMi0xOS44LDQxLjItNDMuMWMwLTIzLjQtMTcuNy00My4xLTQxLjItNDMuMQ0KCUM0NzAuOCw5LjEsNDUzLjIsMjguNyw0NTMuMiw1Mi4xeiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU2Mi43LDk5LjZoLTZWNC43aDE2LjdjNy40LDAsMTQuNiwwLjUsMjAuNSw1LjVjNS44LDQuOSw4LjYsMTIuMSw4LjYsMTkuNWMwLDYuOC0yLjYsMTQuNC03LjksMTguOA0KCWMtNS44LDUtMTMuNyw2LTIxLjIsNmgtMTAuN1Y5OS42eiBNNTczLjYsNDguOWM2LjIsMCwxMS43LTAuOCwxNi42LTUuMmM0LjItMy44LDYuMi04LjcsNi4yLTE0LjJjMC01LjktMi40LTExLjgtNy4yLTE1LjQNCgljLTQuOC0zLjctMTAuOC0zLjgtMTYuNi0zLjhoLTkuOXYzOC41SDU3My42eiIvPg0KPC9zdmc+DQo=" alt=""/><img class="product-photo" src="https://shopassets.britcdn.com/cache/a2/e7/a2e703e3f603341d48eec14f83d2f61c.jpg" alt=""/></div>
    <div class="right cta-module">
      <input type="radio" name="variant-2" id="variant-single-2"/>
      <label class="variant-option" data-button="data-button" for="variant-single-2"><span class="label-price">$39.00</span><span class="label-variant">Kit Only</span></label>
      <input type="radio" name="variant-2" id="variant-bundle-2" checked="checked"/>
      <label class="variant-option" data-button="data-button" for="variant-bundle-2"><span class="label-price">$99.00</span><span class="label-variant">Class + Kit</span></label>
      <button class="primary" data-button="data-button">Add to Cart</button>
      <button class="secondary" data-button="data-button">Give as a Gift</button>
      <p class="multi-line">In this class, Rebecca will share tips, tricks and tidbits on what goes into her design <a href="">process</a> and where she finds inspiration for her ever-growing handbag collection.</p>
      <p class="single-line"> <a href="">Learn More →</a></p>
    </div>
  </section>
  <section class="container bubbles watermelon">
    <div class="left"><img class="logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZpbmFsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwMi43IDEwMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDIuNyAxMDIuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUI0OTM0IiBkPSJNNDMuMSwxMDAuOWMtMTYuNiwwLTQyLjYsMC00Mi42LDBWMS44YzAsMCwyMy45LDAsMzguOCwwYzEyLjgsMCwyMi45LDExLjMsMjIuOSwyNC43DQoJYzAsOS4zLTMuOCwxNy4yLTEyLDIwLjZ2MC4zYzkuNywwLjIsMjAuOCwxMiwyMC44LDI0LjdDNzAuOSw4OS42LDU3LjMsMTAwLjksNDMuMSwxMDAuOXogTTMyLjIsMTcuNGMtNSwwLTEzLjUsMC0xMy41LDB2MjQuMw0KCWMwLDAsOC40LDAsMTMuMSwwYzYuNCwwLDExLjItNS4yLDExLjItMTIuOUM0My4xLDIyLjksMzguNiwxNy40LDMyLjIsMTcuNHogTTM3LjEsNTcuMWMtNSwwLTE4LjQsMC0xOC40LDB2MjguNWMwLDAsMTMuNiwwLDE4LjMsMA0KCWM3LDAsMTQuMS00LjIsMTQuMS0xNC40QzUxLjEsNjEuOCw0My42LDU3LjEsMzcuMSw1Ny4xeiIvPg0KPHBhdGggZmlsbD0iI0ZBRDgxMyIgZD0iTTIyMSwxMDEuOWMtMjcsMC00Ny45LTIzLTQ3LjktNTBjMC0yNy43LDIxLjMtNTEuNSw0OS01MS41YzEyLjEsMCwyNC40LDYuMSwyNC40LDYuMXYyMC44DQoJYzAsMC05LTkuMi0yNC40LTkuMmMtMTcuMiwwLTMwLDE1LjEtMzAsMzIuMmMwLDE3LjcsMTIuMywzMy44LDMwLDMzLjhjMTAuNCwwLDE3LjktNC4yLDI0LjktOS4xYzAsMCwwLDEzLjgsMCwyMC4xDQoJQzI0NC4yLDk3LjIsMjMzLjcsMTAxLjksMjIxLDEwMS45eiIvPg0KPHBvbHlnb24gZmlsbD0iIzlGRDVCQSIgcG9pbnRzPSIxNTkuMSw2MS4zIDE1OS4xLDQyLjUgMTMwLjEsNDIuNSAxMzAuMSwxMy41IDExMS4zLDEzLjUgMTExLjMsNDIuNSA4Mi4zLDQyLjUgODIuMyw2MS4zIA0KCTExMS4zLDYxLjMgMTExLjMsOTAuMyAxMzAuMSw5MC4zIDEzMC4xLDYxLjMgIi8+DQo8cGF0aCBmaWxsPSIjQUFBQUFBIiBkPSJNMzM1LjcsMjAuM2MtNC4zLTYuOC0xMC4zLTExLjItMTkuMy0xMS4yYy0xMC4yLDAtMTcuOSw4LjItMTcuOSwxOC4xUzMwOCw0MS4zLDMxNS43LDQ1bDE4LjEsOS40DQoJYzcuMiw0LjUsMTAuOCwxMC4zLDEwLjgsMTguOWMwLDE1LjctMTQuNCwyNy42LTI5LjcsMjcuNmMtMTMuMiwwLTIzLjUtOC4yLTI4LTIwLjRsNS4zLTIuNGM0LDEwLjEsMTEuNSwxNy4xLDIyLjksMTcuMQ0KCWMxMi41LDAsMjMuNC05LjgsMjMuNC0yMi40YzAtMTAuNy0xMS0xNS4yLTE5LjEtMTkuM2wtMTcuMS05LjFjLTYuMy0zLjktOS44LTkuNC05LjgtMTdjMC0xNC4xLDEwLjEtMjQsMjQuMy0yNA0KCWM5LjYsMCwxOC42LDUuMiwyMy4yLDEzLjNMMzM1LjcsMjAuM3oiLz4NCjxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik00MjYsNDVWNC43aDZ2OTQuOWgtNnYtNDloLTU3Ljd2NDloLTZWNC43aDZWNDVINDI2eiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU0MS43LDUyLjFjMCwyNi43LTIwLjYsNDguNy00Ny4zLDQ4LjdjLTI2LjcsMC00Ny4zLTIyLTQ3LjMtNDguN2MwLTI2LjcsMjAuNC00OC43LDQ3LjMtNDguNw0KCUM1MjEuMSwzLjQsNTQxLjcsMjUuNSw1NDEuNyw1Mi4xeiBNNDUzLjIsNTIuMWMwLDIzLjQsMTcuNiw0My4xLDQxLjIsNDMuMWMyMy41LDAsNDEuMi0xOS44LDQxLjItNDMuMWMwLTIzLjQtMTcuNy00My4xLTQxLjItNDMuMQ0KCUM0NzAuOCw5LjEsNDUzLjIsMjguNyw0NTMuMiw1Mi4xeiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU2Mi43LDk5LjZoLTZWNC43aDE2LjdjNy40LDAsMTQuNiwwLjUsMjAuNSw1LjVjNS44LDQuOSw4LjYsMTIuMSw4LjYsMTkuNWMwLDYuOC0yLjYsMTQuNC03LjksMTguOA0KCWMtNS44LDUtMTMuNyw2LTIxLjIsNmgtMTAuN1Y5OS42eiBNNTczLjYsNDguOWM2LjIsMCwxMS43LTAuOCwxNi42LTUuMmM0LjItMy44LDYuMi04LjcsNi4yLTE0LjJjMC01LjktMi40LTExLjgtNy4yLTE1LjQNCgljLTQuOC0zLjctMTAuOC0zLjgtMTYuNi0zLjhoLTkuOXYzOC41SDU3My42eiIvPg0KPC9zdmc+DQo=" alt=""/><img class="product-photo" src="https://shopassets.britcdn.com/cache/a2/e7/a2e703e3f603341d48eec14f83d2f61c.jpg" alt=""/></div>
    <div class="right cta-module">
      <input type="radio" name="variant-3" id="variant-single-3"/>
      <label class="variant-option" data-button="data-button" for="variant-single-3"><span class="label-price">$39.00</span><span class="label-variant">Kit Only</span></label>
      <input type="radio" name="variant-3" id="variant-bundle-3" checked="checked"/>
      <label class="variant-option" data-button="data-button" for="variant-bundle-3"><span class="label-price">$99.00</span><span class="label-variant">Class + Kit</span></label>
      <button class="primary" data-button="data-button">Add to Cart</button>
      <button class="secondary" data-button="data-button">Give as a Gift</button>
      <p class="multi-line">In this class, Rebecca will share tips, tricks and tidbits on what goes into her design <a href="">process</a> and where she finds inspiration for her ever-growing handbag collection.</p>
      <p class="single-line"> <a href="">Learn More →</a></p>
    </div>
  </section>
  <section class="container minimal watermelon">
    <div class="left"><img class="logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZpbmFsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwMi43IDEwMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDIuNyAxMDIuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUI0OTM0IiBkPSJNNDMuMSwxMDAuOWMtMTYuNiwwLTQyLjYsMC00Mi42LDBWMS44YzAsMCwyMy45LDAsMzguOCwwYzEyLjgsMCwyMi45LDExLjMsMjIuOSwyNC43DQoJYzAsOS4zLTMuOCwxNy4yLTEyLDIwLjZ2MC4zYzkuNywwLjIsMjAuOCwxMiwyMC44LDI0LjdDNzAuOSw4OS42LDU3LjMsMTAwLjksNDMuMSwxMDAuOXogTTMyLjIsMTcuNGMtNSwwLTEzLjUsMC0xMy41LDB2MjQuMw0KCWMwLDAsOC40LDAsMTMuMSwwYzYuNCwwLDExLjItNS4yLDExLjItMTIuOUM0My4xLDIyLjksMzguNiwxNy40LDMyLjIsMTcuNHogTTM3LjEsNTcuMWMtNSwwLTE4LjQsMC0xOC40LDB2MjguNWMwLDAsMTMuNiwwLDE4LjMsMA0KCWM3LDAsMTQuMS00LjIsMTQuMS0xNC40QzUxLjEsNjEuOCw0My42LDU3LjEsMzcuMSw1Ny4xeiIvPg0KPHBhdGggZmlsbD0iI0ZBRDgxMyIgZD0iTTIyMSwxMDEuOWMtMjcsMC00Ny45LTIzLTQ3LjktNTBjMC0yNy43LDIxLjMtNTEuNSw0OS01MS41YzEyLjEsMCwyNC40LDYuMSwyNC40LDYuMXYyMC44DQoJYzAsMC05LTkuMi0yNC40LTkuMmMtMTcuMiwwLTMwLDE1LjEtMzAsMzIuMmMwLDE3LjcsMTIuMywzMy44LDMwLDMzLjhjMTAuNCwwLDE3LjktNC4yLDI0LjktOS4xYzAsMCwwLDEzLjgsMCwyMC4xDQoJQzI0NC4yLDk3LjIsMjMzLjcsMTAxLjksMjIxLDEwMS45eiIvPg0KPHBvbHlnb24gZmlsbD0iIzlGRDVCQSIgcG9pbnRzPSIxNTkuMSw2MS4zIDE1OS4xLDQyLjUgMTMwLjEsNDIuNSAxMzAuMSwxMy41IDExMS4zLDEzLjUgMTExLjMsNDIuNSA4Mi4zLDQyLjUgODIuMyw2MS4zIA0KCTExMS4zLDYxLjMgMTExLjMsOTAuMyAxMzAuMSw5MC4zIDEzMC4xLDYxLjMgIi8+DQo8cGF0aCBmaWxsPSIjQUFBQUFBIiBkPSJNMzM1LjcsMjAuM2MtNC4zLTYuOC0xMC4zLTExLjItMTkuMy0xMS4yYy0xMC4yLDAtMTcuOSw4LjItMTcuOSwxOC4xUzMwOCw0MS4zLDMxNS43LDQ1bDE4LjEsOS40DQoJYzcuMiw0LjUsMTAuOCwxMC4zLDEwLjgsMTguOWMwLDE1LjctMTQuNCwyNy42LTI5LjcsMjcuNmMtMTMuMiwwLTIzLjUtOC4yLTI4LTIwLjRsNS4zLTIuNGM0LDEwLjEsMTEuNSwxNy4xLDIyLjksMTcuMQ0KCWMxMi41LDAsMjMuNC05LjgsMjMuNC0yMi40YzAtMTAuNy0xMS0xNS4yLTE5LjEtMTkuM2wtMTcuMS05LjFjLTYuMy0zLjktOS44LTkuNC05LjgtMTdjMC0xNC4xLDEwLjEtMjQsMjQuMy0yNA0KCWM5LjYsMCwxOC42LDUuMiwyMy4yLDEzLjNMMzM1LjcsMjAuM3oiLz4NCjxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik00MjYsNDVWNC43aDZ2OTQuOWgtNnYtNDloLTU3Ljd2NDloLTZWNC43aDZWNDVINDI2eiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU0MS43LDUyLjFjMCwyNi43LTIwLjYsNDguNy00Ny4zLDQ4LjdjLTI2LjcsMC00Ny4zLTIyLTQ3LjMtNDguN2MwLTI2LjcsMjAuNC00OC43LDQ3LjMtNDguNw0KCUM1MjEuMSwzLjQsNTQxLjcsMjUuNSw1NDEuNyw1Mi4xeiBNNDUzLjIsNTIuMWMwLDIzLjQsMTcuNiw0My4xLDQxLjIsNDMuMWMyMy41LDAsNDEuMi0xOS44LDQxLjItNDMuMWMwLTIzLjQtMTcuNy00My4xLTQxLjItNDMuMQ0KCUM0NzAuOCw5LjEsNDUzLjIsMjguNyw0NTMuMiw1Mi4xeiIvPg0KPHBhdGggZmlsbD0iI0FBQUFBQSIgZD0iTTU2Mi43LDk5LjZoLTZWNC43aDE2LjdjNy40LDAsMTQuNiwwLjUsMjAuNSw1LjVjNS44LDQuOSw4LjYsMTIuMSw4LjYsMTkuNWMwLDYuOC0yLjYsMTQuNC03LjksMTguOA0KCWMtNS44LDUtMTMuNyw2LTIxLjIsNmgtMTAuN1Y5OS42eiBNNTczLjYsNDguOWM2LjIsMCwxMS43LTAuOCwxNi42LTUuMmM0LjItMy44LDYuMi04LjcsNi4yLTE0LjJjMC01LjktMi40LTExLjgtNy4yLTE1LjQNCgljLTQuOC0zLjctMTAuOC0zLjgtMTYuNi0zLjhoLTkuOXYzOC41SDU3My42eiIvPg0KPC9zdmc+DQo=" alt=""/><img class="product-photo" src="https://shopassets.britcdn.com/cache/a2/e7/a2e703e3f603341d48eec14f83d2f61c.jpg" alt=""/></div>
    <div class="right cta-module">
      <input type="radio" name="variant" id="variant-single"/>
      <label class="variant-option" data-button="data-button" for="variant-single"><span class="label-price">$39.00</span><span class="label-variant">Kit Only</span></label>
      <input type="radio" name="variant" id="variant-bundle" checked="checked"/>
      <label class="variant-option" data-button="data-button" for="variant-bundle"><span class="label-price">$99.00</span><span class="label-variant">Class + Kit</span></label>
      <button class="primary" data-button="data-button">Add to Cart</button>
      <button class="secondary" data-button="data-button">Give as a Gift</button>
      <p class="multi-line">In this class, Rebecca will share tips, tricks and tidbits on what goes into her design <a href="">process</a> and where she finds inspiration for her ever-growing handbag collection.</p>
      <p class="single-line"> <a href="">Learn More →</a></p>
    </div>
  </section>
</main>
<div class="design-options">
  <fieldset class="colors">Colors
    <div class="inline">
      <label for="Existing">
        <input id="Existing" type="radio" name="colors" value="existing"/> Current
      </label>
      <label for="Watermelon">
        <input id="Watermelon" type="radio" name="colors" value="watermelon" checked="checked"/> Watermelon
      </label>
    </div>
  </fieldset>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
::-moz-selection {
  background: #F9DAFF;
  text-shadow: none;
}

::selection {
  background: #F9DAFF;
  text-shadow: none;
}

[data-button] {
  display: inline-block;
  position: relative;
  padding: 1em;
  border: 0;
  border-radius: 0.16151rem;
  font-family: "Soleil", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  clip: rect(0, 0, 0, 0);
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
main > * {
  margin-top: 0;
}

.container {
  width: calc(99.99% * 4/12 - 1em);
  max-width: 22.18611em;
  border: 1px solid grey;
}
.container::before {
  width: 100%;
  height: 1.44em;
  content: "";
  display: block;
  top: 0;
  margin-bottom: 1em;
}

.left {
  padding: 0 1.44em;
  width: 100%;
  text-align: center;
}

img {
  width: 100%;
}

.right {
  width: 100%;
  padding: 0 1.44em 1.44em;
}
.right button {
  width: 100%;
}
.right [type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

p {
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.variant-option {
  display: inline-block;
  width: calc(99.99% * 1/2 - 0.69444em);
  margin-right: 1em;
  margin-top: 0;
}
.variant-option > * {
  display: block;
}
.variant-option input {
  display: none;
}
.variant-option:last-of-type {
  margin: 0;
}
.variant-option .label-variant {
  font-weight: 300;
}

.design-options {
  position: fixed;
  bottom: 0em;
  background-color: #d7d7d7;
  width: 100%;
  z-index: 1;
}

fieldset {
  display: inline-block;
  font-weight: bold;
}
fieldset label {
  font-weight: 300;
}

.logo {
  margin-right: auto;
  margin-left: auto;
  width: 60%;
}

.multi-line a {
  text-decoration: none;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 2px 2px;
}

.existing {
  border: 1px solid #88d0cf;
}
.existing:before {
  background-color: #88d0cf;
}
.existing .primary {
  background-color: #00a5b2;
  color: white;
}
.existing .secondary {
  background: none;
  border: 2px solid #00a5b2;
  color: #00a5b2;
}
.existing .variant-option {
  border: 2px solid #d7d7d7;
  background-color: white;
}
.existing [type='radio']:checked + .variant-option {
  border: 2px solid #B988BD;
  background: rgba(185, 136, 189, 0.2);
}
.existing .multi-line a {
  color: inherit;
  background-image: -webkit-linear-gradient(#fff 0%, #00a5b2 0%);
  background-image: linear-gradient(#fff 0%, #00a5b2 0%);
}
.existing .multi-line a:hover {
  color: #00a5b2;
}
.existing .single-line a {
  color: #00a5b2;
  text-decoration: none;
}
.existing .single-line a:hover {
  background-image: -webkit-linear-gradient(#fff 0%, #00a5b2 0%);
  background-image: linear-gradient(#fff 0%, #00a5b2 0%);
  background-repeat: repeat-x;
  background-position: 0 95%;
  background-size: 2px 2px;
}

.watermelon {
  font-weight: 200 !important;
  border: 1px solid #90E1CF;
  line-height: 1;
}
.watermelon:before {
  background-color: #90E1CF;
}
.watermelon .primary {
  background-color: #FD6E6E;
  color: white;
  font-weight: 200;
  letter-spacing: 0.01em;
  padding: 1em 1em calc(1em + 4px) 1em;
  box-shadow: inset 0 -4px #E54949;
}
.watermelon .primary:hover {
  background-color: #E54949;
}
.watermelon .primary:active {
  background-color: #FD6E6E;
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  box-shadow: inset 0 3px #E54949 !important;
  padding: calc(1em + 3px) 1em 1em 1em;
}
.watermelon .secondary {
  background: none;
  border: 2px solid #FF6464;
  color: #FF6464;
}
.watermelon .variant-option {
  border: 2px solid #d7d7d7;
  background-color: white;
}
.watermelon [type='radio']:checked + .variant-option {
  border: 2px solid #58C6C2;
  background: #D0E9E8;
}
.watermelon .multi-line a {
  color: inherit;
  text-decoration: none;
  background-image: -webkit-linear-gradient(#fff 0%, #FF6464 0%);
  background-image: linear-gradient(#fff 0%, #FF6464 0%);
}
.watermelon .multi-line a:hover {
  color: #FF6464;
}
.watermelon .single-line {
  text-align: right;
}
.watermelon .single-line a {
  color: #FF6464;
  text-decoration: none;
}
.watermelon .single-line a:hover {
  background-image: -webkit-linear-gradient(#fff 0%, #FF6464 0%);
  background-image: linear-gradient(#fff 0%, #FF6464 0%);
  background-repeat: repeat-x;
  background-position: 0 95%;
  background-size: 2px 2px;
}

.pressed [data-button]:active {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}

.bubbles [data-button]:active {
  -webkit-transform: translateY(0.07789em);
          transform: translateY(0.07789em);
}

.pressed.watermelon [data-button], .bubbles.watermelon [data-button] {
  -webkit-transition: color 50ms ease-in-out, background-color 50ms ease-in-out, border-color 50ms ease-in-out;
  transition: color 50ms ease-in-out, background-color 50ms ease-in-out, border-color 50ms ease-in-out;
}
.pressed.watermelon .primary:hover, .bubbles.watermelon .primary:hover {
  background-color: #E54949;
}
.pressed.watermelon .primary:active, .bubbles.watermelon .primary:active {
  background-color: #E54949;
}
.pressed.watermelon .secondary:hover, .bubbles.watermelon .secondary:hover {
  border: 2px solid #fd0000;
  color: #fd0000;
}
.pressed.watermelon .secondary:active, .bubbles.watermelon .secondary:active {
  border: 2px solid #fd0000;
  color: #fd0000;
}
.pressed.watermelon .variant-option:hover, .bubbles.watermelon .variant-option:hover {
  border: 2px solid #91d9d7;
  background: #f3f9f9;
}
.pressed.watermelon .variant-option:active, .bubbles.watermelon .variant-option:active {
  border: 2px solid #45c0bb;
  background: #bfe1e0;
}
/* Downloaded from https://ahoj.co.uk/ */
$('.colors input').on('click', function() {
  $('section')
    .removeClass('existing')
    .removeClass('watermelon')
    .addClass($('input[name="colors"]:checked').val());
});

This awesome code is write by Zane Riley, you can se more from this user in the personal repository