How to animate buttons using CSS?

CSSWeb DevelopmentFront End Technology

<p>Following is the code to animate buttons with CSS &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/G7GFGc0O" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate" style="">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; &lt;style&gt; button { &nbsp; &nbsp;font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif; &nbsp; &nbsp;position: relative; &nbsp; &nbsp;background-color: rgb(100, 0, 84); &nbsp; &nbsp;border: none; &nbsp; &nbsp;font-size: 28px; &nbsp; &nbsp;color: rgb(255, 169, 255); &nbsp; &nbsp;padding: 20px; &nbsp; &nbsp;width: 200px; &nbsp; &nbsp;text-align: center; &nbsp; &nbsp;-webkit-transition-duration: 0.4s; &nbsp; &nbsp;box-shadow: 5px 10px 18px rgb(121, 82, 185); &nbsp; &nbsp;transition-duration: 0.4s; &nbsp; &nbsp;text-decoration: none; &nbsp; &nbsp;overflow: hidden; &nbsp; &nbsp;cursor: pointer; } button:after { &nbsp; &nbsp;content: &quot;&quot;; &nbsp; &nbsp;background: rgb(251, 255, 0); &nbsp; &nbsp;display: block; &nbsp; &nbsp;position: absolute; &nbsp; &nbsp;padding-top: 300%; &nbsp; &nbsp;padding-left: 350%; &nbsp; &nbsp;margin-left: -20px; &nbsp; &nbsp;margin-top: -120%; &nbsp; &nbsp;opacity: 0; &nbsp; &nbsp;transition: all 0.8s } button:active:after { &nbsp; &nbsp;padding: 0; &nbsp; &nbsp;margin: 0; &nbsp; &nbsp;opacity: 1; &nbsp; &nbsp;transition: 0s } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Animated Button Example&lt;/h1&gt; &lt;button&gt;Click Here&lt;/button&gt; &lt;h1&gt;Click on the above button to see ripple effect&lt;/h1&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>The above code will produce the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/37037/animate_buttons.jpg" class="fr-fic fr-dib" style="width: 444px; height: 166.816px;" width="444" height="166.816"></p>
raja
Updated on 08-Apr-2020 08:38:20

Advertisements