Taunt Jekyll Theme
2019-06-28T12:47:28+00:00
https://bradleytaunt.com
Bradley Taunt
bradleytaunt@gmail.com
Aqua UI CSS buttons
2016-05-28T00:00:00+00:00
https://bradleytaunt.com/2016/05/28/aqua-ui-buttons
<p>Though it may feel like nostalgia, the old OS design for Mac was arguably better than the current iteration (as of this writing - High Sierra). I recently designed a quick Dribbble shot showcasing how the older operating system used to have so much more character and depth.</p>
<figure>
<img src="https://bradleytaunt.com/public/images/aqua-ui-css-buttons.png" alt="Aqua UI Buttons" loading="lazy" />
<span class="marginnote">My initial Dribbble shot, which can be found <a href="https://dribbble.com/shots/4561658-Aqua-Buttons-UI">here</a>.</span>
</figure>
<p>Since I’ve been wanting to dip my toes into more tutorial-based articles (maybe I’ll even do some screencasts in the future), I decided to start out simple. Let’s walk through how to implement these ‘aqua’ UI buttons with pure CSS.</p>
<h3 id="starting-with-a-basic-foundation">Starting with a basic foundation</h3>
<p>Since this project consists of only two buttons elements, the HTML or <i>skeleton</i> of this project is very straightforward:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">button</span> <span class="nt">class</span><span class="o">=</span><span class="s1">"cancel"</span><span class="o">></span><span class="nt">Cancel</span><span class="o"></</span><span class="nt">button</span><span class="o">></span>
<span class="o"><</span><span class="nt">button</span> <span class="nt">class</span><span class="o">=</span><span class="s1">"confirm"</span><span class="o">></span><span class="nt">Confirm</span><span class="o"></</span><span class="nt">button</span><span class="o">></span>
</code></pre></div></div>
<h3 id="styling-the-buttons">Styling the buttons</h3>
<p>The first step is to remove the browser’s default button styling by using the <code class="highlighter-rouge">appearance</code> property. This will help avoid having to fight against the browser and minimize our CSS code.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">button</span> <span class="p">{</span>
<span class="nl">-webkit-appearance</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">-moz-appearance</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons:</p>
<p>(Pay attention to the <code class="highlighter-rouge">transition</code> property as we will be returning to that shortly)</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">button</span> <span class="p">{</span>
<span class="nl">-webkit-appearance</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">-moz-appearance</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">125px</span><span class="p">;</span>
<span class="nl">box-shadow</span><span class="p">:</span> <span class="nb">inset</span> <span class="m">0</span> <span class="m">13px</span> <span class="m">25px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">0.5</span><span class="p">),</span> <span class="m">0</span> <span class="m">3px</span> <span class="m">5px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.2</span><span class="p">),</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">13px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span>
<span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Lucida Grande'</span><span class="p">,</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">2rem</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">5rem</span> <span class="m">1rem</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">1.2rem</span> <span class="m">4rem</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="n">ease</span> <span class="m">.3s</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Then we separate the specific confirm and cancel button styles into their own class selectors:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">button</span><span class="nc">.confirm</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="m">#4A90E2</span><span class="p">;</span>
<span class="nl">border-color</span><span class="p">:</span> <span class="m">#3672B6</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">button</span><span class="nc">.cancel</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="m">#D0D0D0</span><span class="p">;</span>
<span class="nl">border-color</span><span class="p">:</span> <span class="m">#B8B8B8</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6F6F6F</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="playing-with-pseudo-elements">Playing with pseudo elements</h3>
<p>Now that the button is styled and structured with basic formatting, it’s time to add that classic ‘shine’ seen in the original Dribbble shot.</p>
<p>The cleanest way to do this is by using the <code class="highlighter-rouge">:before</code> pseudo element paired with a linear-gradient background.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">button</span><span class="nd">:before</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">1</span><span class="p">)</span> <span class="m">0%</span><span class="p">,</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">0</span><span class="p">)</span> <span class="m">100%</span><span class="p">);</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">125px</span><span class="p">;</span>
<span class="nl">content</span><span class="p">:</span><span class="s2">''</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">50px</span><span class="p">;</span>
<span class="nl">left</span><span class="p">:</span> <span class="m">4%</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="nl">top</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="n">ease</span> <span class="m">.3s</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">92%</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="adding-interaction">Adding interaction</h3>
<p>The final step is adding the user hover interaction: (Remember that <code class="highlighter-rouge">transition</code> property?)</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">button</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">box-shadow</span><span class="p">:</span> <span class="nb">inset</span> <span class="m">0</span> <span class="m">13px</span> <span class="m">25px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">0.8</span><span class="p">),</span> <span class="m">0</span> <span class="m">3px</span> <span class="m">5px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.2</span><span class="p">),</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">13px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.2</span><span class="p">);</span>
<span class="nl">transform</span><span class="p">:</span> <span class="n">scale</span><span class="p">(</span><span class="m">1.02</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>That’s it!</p>
<h3 id="see-it-live-on-codepen">See it live on CodePen</h3>
<p data-height="265" data-theme-id="0" data-slug-hash="YvKxxm" data-default-tab="result" data-user="bradleytaunt" data-embed-version="2" data-pen-title="macOS Aqua UI" class="codepen">See the Pen <a href="https://codepen.io/bradleytaunt/pen/YvKxxm/">macOS Aqua UI</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script>
<p>You can view this project on CodePen <a href="https://codepen.io/bradleytaunt/pen/YvKxxm">here</a>.</p>
<p>Feel free to fork it or implement your own!</p>