Adding buttons

Author: Donovan Hutchinson

101W1D1/index.html

@@ -44,6 +44,11 @@
 
 
           <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a href="../" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;">&laquo; Back to list</a></p>
+
+<p class="translate" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a class="button" href="https://getnative.me/?ref=cssanimation&amp;lang=en&amp;url=https://cssanimation.rocks/source-css-animation-101/101W1D1/&amp;sourceURL=https://raw.githubusercontent.com/donovanh/animation-101-source/master/src/_posts/2015-03-01-101W1D1.md&amp;title=W1D1+Welcome&amp;format=markdown-yaml-frontmatter" style="margin: 0;padding: 0 30px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #555;display: inline-block;height: 38px;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: transparent;border-radius: 4px;border: 1px solid #bbb;cursor: pointer;box-sizing: border-box;">Translate this article</a></p>
+            <p class="powered-by" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Powered by <img height="25" src="https://cssanimation.rocks/assets/images/getnative.png" alt="native - Community powered translations" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;max-width: 100%;"></p>
+
+
     <h1 style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1;margin-top: 0;margin-bottom: 15px;color: #035F4E;font-weight: 200;font-size: 32px;text-align: center;">Welcome</h1>
 
 <div class="quote callout" style="margin: 16px 0;padding: 16px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;background: #fff;border-radius: 16px;font-size: 24px;color: #aaa;font-style: italic;text-align: center;">

101W1D2/index.html

@@ -44,6 +44,11 @@
 
 
           <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a href="../" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;">&laquo; Back to list</a></p>
+
+<p class="translate" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a class="button" href="https://getnative.me/?ref=cssanimation&amp;lang=en&amp;url=https://cssanimation.rocks/source-css-animation-101/101W1D2/&amp;sourceURL=https://raw.githubusercontent.com/donovanh/animation-101-source/master/src/_posts/2015-03-01-101W1D2.md&amp;title=W1D2+Why+animate%3F&amp;format=markdown-yaml-frontmatter" style="margin: 0;padding: 0 30px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #555;display: inline-block;height: 38px;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: transparent;border-radius: 4px;border: 1px solid #bbb;cursor: pointer;box-sizing: border-box;">Translate this article</a></p>
+            <p class="powered-by" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Powered by <img height="25" src="https://cssanimation.rocks/assets/images/getnative.png" alt="native - Community powered translations" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;max-width: 100%;"></p>
+
+
     <h1 style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1;margin-top: 0;margin-bottom: 15px;color: #035F4E;font-weight: 200;font-size: 32px;text-align: center;">Why animate?</h1>
 
 <div class="quote callout" style="margin: 16px 0;padding: 16px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;background: #fff;border-radius: 16px;font-size: 24px;color: #aaa;font-style: italic;text-align: center;">

101W1D3/index.html

@@ -44,6 +44,11 @@
 
 
           <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a href="../" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;">&laquo; Back to list</a></p>
+
+<p class="translate" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a class="button" href="https://getnative.me/?ref=cssanimation&amp;lang=en&amp;url=https://cssanimation.rocks/source-css-animation-101/101W1D3/&amp;sourceURL=https://raw.githubusercontent.com/donovanh/animation-101-source/master/src/_posts/2015-03-01-101W1D3.md&amp;title=W1D3+Creative+environments&amp;format=markdown-yaml-frontmatter" style="margin: 0;padding: 0 30px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #555;display: inline-block;height: 38px;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: transparent;border-radius: 4px;border: 1px solid #bbb;cursor: pointer;box-sizing: border-box;">Translate this article</a></p>
+            <p class="powered-by" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Powered by <img height="25" src="https://cssanimation.rocks/assets/images/getnative.png" alt="native - Community powered translations" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;max-width: 100%;"></p>
+
+
     <h1 style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1;margin-top: 0;margin-bottom: 15px;color: #035F4E;font-weight: 200;font-size: 32px;text-align: center;">Creative environments</h1>
 
 <div class="quote callout" style="margin: 16px 0;padding: 16px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;background: #fff;border-radius: 16px;font-size: 24px;color: #aaa;font-style: italic;text-align: center;">

101W1D4/index.html

@@ -44,6 +44,11 @@
 
 
           <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a href="../" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;">&laquo; Back to list</a></p>
+
+<p class="translate" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a class="button" href="https://getnative.me/?ref=cssanimation&amp;lang=en&amp;url=https://cssanimation.rocks/source-css-animation-101/101W1D4/&amp;sourceURL=https://raw.githubusercontent.com/donovanh/animation-101-source/master/src/_posts/2015-03-01-101W1D4.md&amp;title=W1D4+Transitions&amp;format=markdown-yaml-frontmatter" style="margin: 0;padding: 0 30px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #555;display: inline-block;height: 38px;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: transparent;border-radius: 4px;border: 1px solid #bbb;cursor: pointer;box-sizing: border-box;">Translate this article</a></p>
+            <p class="powered-by" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Powered by <img height="25" src="https://cssanimation.rocks/assets/images/getnative.png" alt="native - Community powered translations" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;max-width: 100%;"></p>
+
+
     <h1 style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1;margin-top: 0;margin-bottom: 15px;color: #035F4E;font-weight: 200;font-size: 32px;text-align: center;">Transitions</h1>
 
 <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Let&rsquo;s look the <code style="margin: 0;padding: 2px 6px;font-family: Courier New,Courier, monospace;background: #fff;border-radius: 4px;">transition</code> property.</p>

101W1D5/index.html

@@ -44,6 +44,11 @@
 
 
           <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a href="../" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;">&laquo; Back to list</a></p>
+
+<p class="translate" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a class="button" href="https://getnative.me/?ref=cssanimation&amp;lang=en&amp;url=https://cssanimation.rocks/source-css-animation-101/101W1D5/&amp;sourceURL=https://raw.githubusercontent.com/donovanh/animation-101-source/master/src/_posts/2015-03-01-101W1D5.md&amp;title=W1D5+Animations&amp;format=markdown-yaml-frontmatter" style="margin: 0;padding: 0 30px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #555;display: inline-block;height: 38px;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: transparent;border-radius: 4px;border: 1px solid #bbb;cursor: pointer;box-sizing: border-box;">Translate this article</a></p>
+            <p class="powered-by" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Powered by <img height="25" src="https://cssanimation.rocks/assets/images/getnative.png" alt="native - Community powered translations" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;max-width: 100%;"></p>
+
+
     <h1 style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1;margin-top: 0;margin-bottom: 15px;color: #035F4E;font-weight: 200;font-size: 32px;text-align: center;">Animations</h1>
 
 <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">So far we&rsquo;ve discussed why we animate, found some sources of inspiration, looked at tools and sites we might find useful for development, and learned what transitions are.</p>

101W2D1/index.html

@@ -44,6 +44,11 @@
 
 
           <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a href="../" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;">&laquo; Back to list</a></p>
+
+<p class="translate" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a class="button" href="https://getnative.me/?ref=cssanimation&amp;lang=en&amp;url=https://cssanimation.rocks/source-css-animation-101/101W2D1/&amp;sourceURL=https://raw.githubusercontent.com/donovanh/animation-101-source/master/src/_posts/2015-03-01-101W2D1.md&amp;title=W2D1+Transitions+in+action&amp;format=markdown-yaml-frontmatter" style="margin: 0;padding: 0 30px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #555;display: inline-block;height: 38px;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: transparent;border-radius: 4px;border: 1px solid #bbb;cursor: pointer;box-sizing: border-box;">Translate this article</a></p>
+            <p class="powered-by" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Powered by <img height="25" src="https://cssanimation.rocks/assets/images/getnative.png" alt="native - Community powered translations" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;max-width: 100%;"></p>
+
+
     <h1 style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1;margin-top: 0;margin-bottom: 15px;color: #035F4E;font-weight: 200;font-size: 32px;text-align: center;">Transitions in action</h1>
 
 <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Last week we introduced the <code style="margin: 0;padding: 2px 6px;font-family: Courier New,Courier, monospace;background: #fff;border-radius: 4px;">transition</code> and <code style="margin: 0;padding: 2px 6px;font-family: Courier New,Courier, monospace;background: #fff;border-radius: 4px;">animation</code> properties. It&rsquo;s time to delve further into transitions and see some code!</p>

101W2D2/index.html

@@ -44,6 +44,11 @@
 
 
           <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a href="../" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #2BA6CB;">&laquo; Back to list</a></p>
+
+<p class="translate" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;"><a class="button" href="https://getnative.me/?ref=cssanimation&amp;lang=en&amp;url=https://cssanimation.rocks/source-css-animation-101/101W2D2/&amp;sourceURL=https://raw.githubusercontent.com/donovanh/animation-101-source/master/src/_posts/2015-03-01-101W2D2.md&amp;title=W2D2+Transitions+properties&amp;format=markdown-yaml-frontmatter" style="margin: 0;padding: 0 30px;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #555;display: inline-block;height: 38px;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: transparent;border-radius: 4px;border: 1px solid #bbb;cursor: pointer;box-sizing: border-box;">Translate this article</a></p>
+            <p class="powered-by" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Powered by <img height="25" src="https://cssanimation.rocks/assets/images/getnative.png" alt="native - Community powered translations" style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;max-width: 100%;"></p>
+
+
     <h1 style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1;margin-top: 0;margin-bottom: 15px;color: #035F4E;font-weight: 200;font-size: 32px;text-align: center;">Transitions properties</h1>
 
 <p style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;color: #333;margin-bottom: 10px;font-weight: normal;font-size: 16px;line-height: 1.6;">Now that we have seen the transition property in action, let&rsquo;s look at the properties that go into transitions and cover what they mean.</p>