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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              <h1>Fluent Design Reveal Effect</h1>
<a href="#list-variant"><i>To see the "list variant" (sidebar), click here</i></a>
<h2 id="basic-usage">Basic usage</h2>
<p>There's no dependency on this; I put some CDN in order to make a few examples prettier.</p>
<p>You can use <code>&lt;a&gt;</code>,  <code>&lt;button&gt;</code> or  <code>&lt;label&gt;</code> tags, as long as you put them inside the following structure :</p>
<code>
    &#x3C;div class=&#x22;reveal-group&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;!-- your buttons here --&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;<br>
  &#x3C;/div&#x3E;<br>
</code>
<p>Here are some examples:</p>
<!-- note: the fieldset and legend are absolutely not required, it's only for this demo -->
<fieldset>
  <legend>Basic</legend>
  <div class="reveal-group">
    <div class="inner">
      <button>1</button>
      <button disabled>2</button>
      <button>3</button>
      <button>4</button>
    </div>
  </div>
  <p>Code:</p>
  <code>
    &#x3C;div class=&#x22;reveal-group&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;1&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button disabled&#x3E;2&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;3&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;4&#x3C;/button&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;<br>
  &#x3C;/div&#x3E;<br>
  </code>
</fieldset>

<fieldset>
  <legend>Vertical</legend>
  <div class="reveal-group vertical">
    <div class="inner">
      <a href="#" title="width an <a> tag">1</a>
      <a href="#" title="width an <a> tag">2</a>
      <a href="#" title="width an <a> tag">3</a>
      <a href="#" title="width an <a> tag">4</a>
    </div>
  </div>
  <p>Code:</p>
  <code>
     &#x3C;div class=&#x22;reveal-group vertical&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;1&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button disabled&#x3E;2&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;3&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;4&#x3C;/button&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;<br>
  &#x3C;/div&#x3E;<br>
  </code>
</fieldset>

<fieldset>
  <legend>Grid (with radios)</legend>
  <div class="reveal-group grid">
    <div class="inner">
      <label><input type="radio" name="test-1"><span>1</span></label>
      <label><input type="radio" name="test-1"><span>2</span></label>
      <label><input type="radio" checked name="test-1"><span>3</span></label>
      <label><input type="radio" name="test-1"><span>4</span></label>
      <label><input type="radio" name="test-1"><span>5</span></label>
      <label><input type="radio" name="test-1"><span>6</span></label>
      <label><input type="radio" name="test-1"><span>7</span></label>
      <label><input type="radio" name="test-1"><span>8</span></label>
      <label><input type="radio" name="test-1"><span>9</span></label>
    </div>
  </div>
  <p>Code:</p>
  <code>
    &#x3C;!-- the &#x22;grid&#x22; class just sets a fixed width on the group --&#x3E;<br>
  &#x3C;div class=&#x22;reveal-group grid&#x22;&#x3E;<br>
  &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;1&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;2&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; checked name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;3&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;4&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;5&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;6&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;7&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;8&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&nbsp;&#x3C;label&#x3E;&#x3C;input type=&#x22;radio&#x22; name=&#x22;test-1&#x22;&#x3E;&#x3C;span&#x3E;9&#x3C;/span&#x3E;&#x3C;/label&#x3E;<br>
  &nbsp;&#x3C;/div&#x3E;<br>
  &#x3C;/div&#x3E;
  </code>
</fieldset>

<fieldset class="bg">
  <legend>Grid ontop of a background</legend>
  <div class="reveal-group grid transparent">
    <div class="inner">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>7</button>
      <button>8</button>
      <button>9</button>
    </div>
  </div>
  <p>Code:</p>
  <code>
    &#x3C;div class=&#x22;reveal-group transparent grid&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;1&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button disabled&#x3E;2&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;3&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;4&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;5&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;6&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;7&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;8&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;9&#x3C;/button&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;<br>
  &#x3C;/div&#x3E;<br>
  </code>
</fieldset>

<fieldset>
  <legend>Bordered Buttons (& empty placeholder)</legend>
  <div class="reveal-group grid bordered">
    <div class="inner">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>7</button>
      <button>8</button>
      <span class="placeholder"></span>
    </div>
  </div>
  <p>Code:</p>
  <code>
    &#x3C;div class=&#x22;reveal-group bordered grid&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;1&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button disabled&#x3E;2&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;3&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;4&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;5&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;6&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;7&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;8&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;span class="placeholder"&#x3E;&#x3C;/span&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;<br>
  &#x3C;/div&#x3E;<br>
  </code>
</fieldset>

<fieldset>
  <legend>Inverted (& empty placeholder)</legend>
  <div class="reveal-group grid inverted">
    <div class="inner">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <span class="placeholder"></span>
      <button>6</button>
      <button>7</button>
      <button>8</button>
      <button>9</button>
    </div>
  </div>
  <p>Code:</p>
  <code>
    &#x3C;div class=&#x22;reveal-group inverted grid&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;1&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button disabled&#x3E;2&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;3&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;4&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;span class="placeholder"&#x3E;9&#x3C;/span&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;6&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;7&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;8&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;9&#x3C;/button&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;<br>
  &#x3C;/div&#x3E;<br>
  </code>
</fieldset>


<fieldset>
  <legend>Width auto</legend>
  <div class="reveal-group vertical auto-width">
    <div class="inner">
      <button>lorem ipsum dolor sit amet</button>
      <button>hello wuuurld</button>
      <button>{´◕ ◡ ◕`}</button>
      <button>(╯°□°)╯︵ ┻━┻</button>
    </div>
  </div>
  <p>Code:</p>
  <code>
    &#x3C;div class=&#x22;reveal-group auto-width grid&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;1&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button disabled&#x3E;2&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;3&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;4&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;5&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;6&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;7&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;8&#x3C;/button&#x3E;<br>
    &nbsp;&nbsp;&#x3C;button&#x3E;9&#x3C;/button&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;<br>
  &#x3C;/div&#x3E;<br>
  </code>
</fieldset>

<hr>
<h2 id="list-variant">"List" variant</h2> 
<p>We've seen a lot of examples where the reveal effect occurs not on button groups, but on vertical list (like a lateral bar). So here's the variant for that.</p>


<fieldset>
  <legend>Vertical Variant (auto-width)</legend>
  <div class="reveal-group vertical auto-width variant lateralbar-example">
    <div class="inner">
      <a href="#"><span class="lnr lnr-apartment"></span> Home</a>
      <a href="#"><span class="lnr lnr-earth"></span> Explore</a>
      <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a>
      <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a>
    </div>
  </div>
  <p>Code:</p>
  <code>
    &#x3C;!-- the &#x22;lateralbar-example&#x22; class is only for the sake of this example --&#x3E;<br>
&#x3C;div class=&#x22;reveal-group vertical auto-width variant lateralbar-example&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-apartment&#x22;&#x3E;&#x3C;/span&#x3E; Home&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-earth&#x22;&#x3E;&#x3C;/span&#x3E; Explore&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-cog&#x22;&#x3E;&#x3C;/span&#x3E; Manage my profile&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-power-switch&#x22;&#x3E;&#x3C;/span&#x3E; Get the hell out of here!&#x3C;/a&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;
  </code>
</fieldset>

<fieldset>
  <legend>Vertical Variant with light reveal (auto-width, empty placeholder)</legend>
  <div class="reveal-group vertical auto-width variant light-reveal lateralbar-example">
    <div class="inner">
      <a href="#"><span class="lnr lnr-apartment"></span> Home</a>
      <a href="#"><span class="lnr lnr-earth"></span> Explore</a>
      <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a>
      <span class="placeholder"></span>
      <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a>
    </div>
  </div><p>Code:</p>
  <code>
    &#x3C;!-- the &#x22;lateralbar-example&#x22; class is only for the sake of this example --&#x3E;<br>
&#x3C;div class=&#x22;reveal-group vertical auto-width variant light-reveal lateralbar-example&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-apartment&#x22;&#x3E;&#x3C;/span&#x3E; Home&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-earth&#x22;&#x3E;&#x3C;/span&#x3E; Explore&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-cog&#x22;&#x3E;&#x3C;/span&#x3E; Manage my profile&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;span class="placeholder"&#x3E;9&#x3C;/span&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-power-switch&#x22;&#x3E;&#x3C;/span&#x3E; Get the hell out of here!&#x3C;/a&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;
  </code>
</fieldset>


<fieldset>
  <legend>Vertical Variant inverted with light reveal (auto-width)</legend>
  <div class="reveal-group vertical auto-width variant inverted bordered light-reveal lateralbar-example">
    <div class="inner">
      <a href="#"><span class="lnr lnr-apartment"></span> Home</a>
      <a href="#"><span class="lnr lnr-earth"></span> Explore</a>
      <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a>
      <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a>
    </div>
  </div><p>Code:</p>
  <code>
    &#x3C;!-- the &#x22;lateralbar-example&#x22; class is only for the sake of this example --&#x3E;<br>
&#x3C;div class=&#x22;reveal-group vertical auto-width variant inverted light-reveal lateralbar-example&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-apartment&#x22;&#x3E;&#x3C;/span&#x3E; Home&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-earth&#x22;&#x3E;&#x3C;/span&#x3E; Explore&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-cog&#x22;&#x3E;&#x3C;/span&#x3E; Manage my profile&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-power-switch&#x22;&#x3E;&#x3C;/span&#x3E; Get the hell out of here!&#x3C;/a&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;
  </code>
</fieldset>

<fieldset>
  <legend>Vertical Variant inverted with light reveal (auto-width, stacked empty placeholders)</legend>
  <div class="reveal-group vertical auto-width variant inverted bordered light-reveal lateralbar-example">
    <div class="inner">
      <a href="#"><span class="lnr lnr-apartment"></span> Home</a>
      <a href="#"><span class="lnr lnr-earth"></span> Explore</a>
      <span class="placeholder"></span>
      <span class="placeholder"></span>
      <a href="#"><span class="lnr lnr-cog"></span> Manage my profile</a>
      <span class="placeholder"></span>
      <a href="#"><span class="lnr lnr-power-switch"></span> Get the hell out of here!</a>
    </div>
  </div><p>Code:</p>
  <code>
    &#x3C;!-- the &#x22;lateralbar-example&#x22; class is only for the sake of this example --&#x3E;<br>
&#x3C;div class=&#x22;reveal-group vertical auto-width variant inverted light-reveal lateralbar-example&#x22;&#x3E;<br>
    &nbsp;&#x3C;div class=&#x22;inner&#x22;&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-apartment&#x22;&#x3E;&#x3C;/span&#x3E; Home&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-earth&#x22;&#x3E;&#x3C;/span&#x3E; Explore&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;span class="placeholder"&#x3E;9&#x3C;/span&#x3E;<br>
    &nbsp;&nbsp;&#x3C;span class="placeholder"&#x3E;9&#x3C;/span&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-cog&#x22;&#x3E;&#x3C;/span&#x3E; Manage my profile&#x3C;/a&#x3E;<br>
    &nbsp;&nbsp;&#x3C;span class="placeholder"&#x3E;9&#x3C;/span&#x3E;<br>
    &nbsp;&nbsp;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;span class=&#x22;lnr lnr-power-switch&#x22;&#x3E;&#x3C;/span&#x3E; Get the hell out of here!&#x3C;/a&#x3E;<br>
    &nbsp;&#x3C;/div&#x3E;
  </code>
</fieldset>
            
          
!
            
              $primary: rgba(220, 220, 220, .9);
$accent: darken($primary, 15%);
$dark: darken($primary, 60%);
$btn-size: 70px;

.reveal-group {
  position: relative;
  display: inline-block;
  margin: 0; padding: 0;
  background-color: $primary;
  overflow: hidden;
  & > .inner {
    position: relative;
    margin: 0; padding: 3px;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    box-shadow: 0 0 0 2px $primary inset;
    & > button,
    & > a, 
    & > label {
      appearance: unset;
      position: relative;
      display: inline-block;
      width: $btn-size; height: $btn-size;
      margin: 3px; padding: 0;
      box-sizing: border-box;
      background-color: $primary;
      border: 1px solid transparent;
      &::before {
        content: "";
        position: absolute;
        top: -6px; left: -6px;
        display: block;
        width: calc(100% + 4px); height: calc(100% + 4px);
        border: 4px solid $primary;
        background-color: transparent;
      }
      &:not(:disabled),
      &:not([disabled]) {
        &:hover,
        &:focus{
          cursor: pointer;
          background-color: $accent;
          border-color: $dark;
          outline: none;
        }
        &:active::before {
          background-color: rgba($dark, .2);
        }
      }
      &:disabled,
      &[disabled] {
        cursor: not-allowed;
        //box-shadow: 0 0 0 2px $primary;
      }
    }
    & > .placeholder {
      position: relative;
      display: inline-block;
      width: $btn-size; height: $btn-size;
      margin: 3px; padding: 0;
      box-sizing: border-box;
      background-color: $primary;
      border: 1px solid $primary;
      cursor: unset;
      &::before {
        content: "";
        position: absolute;
        top: -5px; left: -5px;
        display: block;
        width: calc(100% + 2px); height: calc(100% + 2px);
        border: 4px solid $primary;
        border-right-width: 5px;
        border-bottom-width: 5px;
        background-color: transparent;
      }
    }
    & > a,
    & > label {
      color: initial;
      text-decoration: none;
      text-align: center;
      line-height: $btn-size;
      & > :checked ~ span:after {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        box-shadow: 0 0 0 1px $dark inset;
        background-color: rgba($dark, .2);
      }
    }
  }
  & > .cursor-shadow {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    box-shadow: 0 0 100px 100px $dark;
    opacity: 0;
    z-index: 0;
    transition: opacity .1s linear;
  }
  &.vertical > .inner {
    flex-direction: column;
  }
}

/* optional */
.reveal-group.transparent {
  &:not(:hover) {
    background-color: transparent;
    transition: background-color .1s linear;
    & > .inner {
      box-shadow: 0 0 0 2px transparent inset;
      transition: box-shadow .1s linear;
      & > button,
      & > a, 
      & > label,
      & > .placeholder {
        background-color: transparent;
        transition: background-color .1s linear;
        &::before {
          border-color: transparent;
          transition: border-color .1s linear;
        }
      }
    }
  }
}
.reveal-group.bordered {
  background-color: $accent;
}
$primary-inverted: rgba(30, 30, 30, 1);
$accent-inverted: lighten($primary-inverted, 15%);
$light: lighten($primary-inverted, 40%);
.reveal-group.inverted {
  background-color: lighten($primary-inverted, 5%);
  & > .inner {
    box-shadow: 0 0 0 2px $primary-inverted inset;
    & > button,
    & > a, 
    & > label {
      color: #fff;
      background-color: $primary-inverted;
      &::before {
        border-color: $primary-inverted;
      }
      &:not(:disabled),
      &:not([disabled]) {
        &:hover,
        &:focus{
          background-color: $accent-inverted;
          border-color: $light;
        }
        &:active::before {
          background-color: rgba($accent-inverted, .2);
        }
      }
    }
    & > label > :checked ~ span:after {
      background-color: rgba($light, .2);
    }
    & > .placeholder {
      background-color: $primary-inverted;
      border: 1px solid $primary-inverted;
      cursor: unset;
      &::before {
        content: "";
        position: absolute;
        top: -5px; left: -5px;
        display: block;
        width: calc(100% + 2px); height: calc(100% + 2px);
        border: 4px solid $primary-inverted;
        border-right-width: 5px;
        border-bottom-width: 5px;
        background-color: transparent;
      }
    }
  }
  & > .cursor-shadow {
    box-shadow: 0 0 100px 100px $light;
  }
}
.reveal-group.auto-width > .inner {
  & > a, 
  & > button, 
  & > label,
  & > .placeholder {
    width: auto;
    padding: 0 5px;
    text-align: center;
  }
}
.reveal-group.vertical.variant {
  background-color: $accent;
  &.inverted {
    background-color: $primary-inverted;
  }
  & > .inner {
    box-shadow: unset;
    padding: 0;
    margin: 1px 0;
    & > a, 
    & > button, 
    & > label {
      margin: 0 0 1px 0;
      padding-left: 20px;
      padding-right: 20px;
      text-align: left;
      &:last-child {
        margin-bottom: 0;
      }
      &::before {
        border-top-width: 0;
        border-bottom-width: 0;
      }
      &:hover {
        border-color: transparent;
      }
    }
    & > .placeholder::before {
      top: -4px;
    }
    & > .placeholder + .placeholder::before {
      top: -8px;
      border-top-width: 8px;
    }
  }
  & > .cursor-shadow {
    box-shadow: 0 0 80px 80px darken($dark, 30%);
  }
}
.reveal-group.variant.light-reveal {
  & > .inner {
    & > a, 
    & > button, 
    & > label {
      &:hover {
        background-color: lighten($primary, 2%);
      }
      &:active, 
      &:focus {
        border-left-color: $accent;
        border-right-color: $accent;
        border-top-color: #fff;
        border-bottom-color: #fff;
        background-color: lighten($primary, 2%);
      }
    }
  }
  &.inverted {
    background-color: lighten($primary-inverted, 5%);
    & > .inner {
      & > a, 
      & > button, 
      & > label {
        &:hover {
          background-color: lighten($primary-inverted, 2%);
        }
        &:active, 
        &:focus {
          border-left-color: $accent-inverted;
          border-right-color: $accent-inverted;
          border-top-color: #fff;
          border-bottom-color: #fff;
          background-color: lighten($primary-inverted, 2%);
        }
      }
    }
  }
  & > .cursor-shadow {
    box-shadow: 0 0 80px 80px #fff;
  }
  &.inverted > .cursor-shadow {
    box-shadow: 0 0 80px 80px $light;
  }
}


/* just for this demo */
fieldset {
  display: inline-block;
  vertical-align: top;
  margin: 40px;
  code {
    display: block;
  }
}
code {
  display: inline-block;
  padding: 5px;
  background-color: #ddd;
}

.grid {
  width: 235px;
}

.bg > .reveal-group {
  background: transparent url('https://i.redditmedia.com/0OLHA2uX1XkIh-FZYe_JvJdv0Ddy-FQ-0XfnzO4ZTtQ.png?s=d1ca3c270371116d000bd718c84489ad') 0 0 no-repeat fixed;
}
.lateralbar-example a {
  width: auto;
  min-width: 350px;
  font-family: 'Segoe UI Light', 'SelawikLight';
  font-weight: normal;
  font-style: normal; 
}
            
          
!
            
              function hoverFadeOut (e) {
  var cursorFollower = this.querySelector('.cursor-shadow');
  cursorFollower.style.opacity = 0;
};

function hoverReveal (e) {
  var cursorFollower = this.querySelector('.cursor-shadow');
  var parentBoundingClient = cursorFollower.parentElement.getBoundingClientRect();
  cursorFollower.style.opacity = 1;
  cursorFollower.style.top = e.pageY - cursorFollower.parentElement.offsetTop + 'px';
  cursorFollower.style.left = e.pageX - cursorFollower.parentElement.offsetLeft + 'px';
}; 


var btnGroups = document.querySelectorAll('.reveal-group');
[].forEach.call(btnGroups, function(group) {
  group.appendChild(document.createElement('span'))
       .classList.add('cursor-shadow');
  group.addEventListener('mousemove', hoverReveal);
  group.addEventListener('mouseleave', hoverFadeOut);
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console