aboutsummaryrefslogtreecommitdiff
path: root/build/shiny-css-buttons/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'build/shiny-css-buttons/index.html')
-rw-r--r--build/shiny-css-buttons/index.html58
1 files changed, 40 insertions, 18 deletions
diff --git a/build/shiny-css-buttons/index.html b/build/shiny-css-buttons/index.html
index 4422c24..be58ddb 100644
--- a/build/shiny-css-buttons/index.html
+++ b/build/shiny-css-buttons/index.html
@@ -1,34 +1,46 @@
<!doctype html>
-<html lang="en" id="top">
+<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>Shiny, Animated CSS Buttons</title>
- <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
- <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style>
+ <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
+ <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
+<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
- <a href="#menu">Menu &darr;</a>
+ <a href="#menu">Menu &darr;</a>
</nav>
<main>
-<h1>Shiny, Animated CSS Buttons</h1>
+<h1 id="shiny-animated-css-buttons">Shiny, Animated CSS Buttons</h1>
+
<p>2021-04-27</p>
+
<p>Everyone can appreciate fancy, animated buttons - but often times they come with a performance cost: <em>JavaScript</em>. Luckily for us, we can create our very own shiny, animated buttons with pure CSS.</p>
-<h2>The Demo</h2>
+
+<h2 id="the-demo">The Demo</h2>
+
<p><img src="/public/images/shiny-buttons.png" alt="Four buttons that shine when hovered" /></p>
+
<p><a href="https://codepen.io/bradleytaunt/pen/oNBQevj">Live CodePen Example</a></p>
-<h2>The HTML</h2>
+
+<h2 id="the-html">The HTML</h2>
+
<p>Nothing fancy going on here, just a set of <code>ahref</code> elements with specific <code>button</code> classes added:</p>
-<pre><code>&lt;a href=&quot;#&quot; class=&quot;button green&quot;&gt;&lt;span&gt;Green Button&lt;/span&gt;&lt;/a&gt;
-&lt;a href=&quot;#&quot; class=&quot;button blue&quot;&gt;&lt;span&gt;Blue Button&lt;/span&gt;&lt;/a&gt;
-&lt;a href=&quot;#&quot; class=&quot;button orange&quot;&gt;&lt;span&gt;Orange Button&lt;/span&gt;&lt;/a&gt;
-&lt;a href=&quot;#&quot; class=&quot;button purple&quot;&gt;&lt;span&gt;Purple Button&lt;/span&gt;&lt;/a&gt;
+
+<pre><code>&#60;a href="#" class="button green"&#62;&#60;span&#62;Green Button&#60;&#47;span&#62;&#60;&#47;a&#62;
+&#60;a href="#" class="button blue"&#62;&#60;span&#62;Blue Button&#60;&#47;span&#62;&#60;&#47;a&#62;
+&#60;a href="#" class="button orange"&#62;&#60;span&#62;Orange Button&#60;&#47;span&#62;&#60;&#47;a&#62;
+&#60;a href="#" class="button purple"&#62;&#60;span&#62;Purple Button&#60;&#47;span&#62;&#60;&#47;a&#62;
</code></pre>
-<h2>The CSS</h2>
+
+<h2 id="the-css">The CSS</h2>
+
<p>First we set the default base styling for all the buttons. We also place the inner text into <code>span</code> elements (I will explain why in a little bit):</p>
+
<pre><code>.button {
background: white;
border: 1px solid #a5b1c2;
@@ -50,10 +62,12 @@
z-index: 2;
}
</code></pre>
+
<p>Now we need to create our <em>shiny</em> element that will pass across the button on <code>hover</code> or <code>focus</code>. For this object we will use the <code>before</code> pseudo element:</p>
+
<pre><code>.button:before {
background: linear-gradient(transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
- content:'';
+ content:&#39;&#39;;
height: 200%;
position: absolute;
right: calc(100% + 20px);
@@ -64,25 +78,33 @@
z-index: 0;
}
</code></pre>
-<p>Next, we tell the <code>before</code> element to swipe across the main <code>.button</code> parent element when the user hovers or focuses on it. Remember placing our inner content into a <code>span</code> element? That insures that our shiny/swipe element doesn't position itself <em>over</em> the text, but instead flows under it:</p>
+
+<p>Next, we tell the <code>before</code> element to swipe across the main <code>.button</code> parent element when the user hovers or focuses on it. Remember placing our inner content into a <code>span</code> element? That insures that our shiny&#47;swipe element doesn&#8217;t position itself <em>over</em> the text, but instead flows under it:</p>
+
<pre><code>.button:hover:before {
right: -100%;
}
-/* Extra visual styling for buttons on hover - optional */
+&#47;* Extra visual styling for buttons on hover - optional *&#47;
.button:hover, button:focus {
box-shadow: 0 8px 12px rgba(0,0,0,0.1), inset 0 10px 30px rgba(255,255,255,0.3), inset 0 2px 2px rgba(255,255,255,0.2);
color: white;
}
</code></pre>
-<p>All that's left is adding some visual flare to each individual button - in this case background-color and border-color:</p>
+
+<p>All that&#8217;s left is adding some visual flare to each individual button - in this case background-color and border-color:</p>
+
<pre><code>.button.green:hover, button.green:focus { background: #20bf6b; border-color: #20bf6b; }
.button.blue:hover, button.blue:focus { background: #0984e3; border-color: #0984e3; }
.button.orange:hover, button.orange:focus { background: #ff793f; border-color: #ff793f; }
.button.purple:hover, button.purple:focus { background: #6c5ce7; border-color: #6c5ce7; }
</code></pre>
-<h2>Browser Support</h2>
+
+<h2 id="browser-support">Browser Support</h2>
+
<p>These buttons work across all browsers flawlessly. See the details <a href="https://caniuse.com/css-gencontent">on the caniuse report itself</a>.</p>
-<h2>The Live CodePen</h2>
+
+<h2 id="the-live-codepen">The Live CodePen</h2>
+
<p>You can find the live demo embedded at the top of this post, or <a href="https://codepen.io/bradleytaunt/pen/oNBQevj">directly on CodePen here</a>.</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>