SVG Button Animation

Developer
Jon Christensen
Size
4,333 Kb
Views
58,696
  1. SVG Button Animation Previews
  2. SVG Button Animation HTML Codes
  3. SVG Button Animation CSS Codes
  4. SVG Button Animation JS Codes

How do I make an svg button animation?

Just playing with some SVG interaction. Inspired by this pen: http://codepen.io/fusco/pen/bvAwE (Admittedly, that effect is more awesome, but the JS in mine makes it more versatile). . What is a svg button animation? How do you make a svg button animation? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

SVG Button Animation Previews
IQ Test

SVG Button Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Button Animation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>SVG Animated Buttons</h1>
<h2>Animate with SVG baby!</h2>
<p>Doing the SVG line animation with variable size buttons could be hard, but with a little JS, you can use any size button and get the same effect without any math on your part. Because thinking is for losers.</p>
<div class="container"> <p>
<button type="button" class="btn btn-svg"> <svg class="btn_svg" version="1.1" viewBox="0 0 30 20" preserveAspectRatio="none"> <rect class="btn_svg_shape" width="30" height="20"/> </svg> <span>This is a button</span>
</button> </p> <p>
<button type="button" class="btn btn-svg btn-big"> <svg class="btn_svg" version="1.1" viewBox="0 0 30 20" preserveAspectRatio="none"> <rect class="btn_svg_shape" width="30" height="20"/> </svg> <span>This is a button</span>
</button> </p> <p>
<button type="button" class="btn btn-svg btn-small"> <svg class="btn_svg" version="1.1" viewBox="0 0 30 20" preserveAspectRatio="none"> <rect class="btn_svg_shape" width="30" height="20"/> </svg> <span>This is a button</span>
</button> </p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Button Animation - Script Codes CSS Codes

.btn { position: relative; overflow: hidden; background: none; padding: 1em; background-color: transparent; -webkit-transition: background-color 250ms ease-in; transition: background-color 250ms ease-in; font-size: 1.5rem; color: orange; -webkit-transition-property: background-color, color; transition-property: background-color, color; -webkit-transition-duration: 250ms; transition-duration: 250ms; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 0; transition-delay: 0; border: none;
}
.btn.btn-small { font-size: 1rem;
}
.btn.btn-big { font-size: 2rem;
}
.btn:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid orange; opacity: 1; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 250ms; transition-duration: 250ms; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 0; transition-delay: 0;
}
.btn > span { position: relative;
}
.btn .btn_svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.btn .btn_svg_shape { stroke: orange; stroke-width: 2px; stroke-linecap: round; fill: transparent;
}
.btn:hover { -webkit-transition-delay: 250ms; transition-delay: 250ms; background-color: rgba(0, 0, 0, 0.4); color: white;
}
.btn:hover:before { opacity: 0;
}
.btn:hover .btn_svg_shape { -webkit-transition-property: stroke-dasharray, stroke-dashoffset; transition-property: stroke-dasharray, stroke-dashoffset; -webkit-transition-duration: 500ms; transition-duration: 500ms; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: 0; transition-delay: 0; stroke-dashoffset: 0 !important; -webkit-animation: 500ms pencil ease-in forwards; animation: 500ms pencil ease-in forwards;
}
/* Stroke animation. Use ems to scale :) */
@-webkit-keyframes pencil { 0% { stroke-width: 0.5em; } 75% { stroke-width: 0.25em; } 100% { stroke-width: 0.1em; }
}
@keyframes pencil { 0% { stroke-width: 0.5em; } 75% { stroke-width: 0.25em; } 100% { stroke-width: 0.1em; }
}
/* Transition mixin, cause lazy */
/* W00t border-box */
* { box-sizing: border-box;
}
*:after,
*:before { box-sizing: border-box;
}
/* Make things perty */
html { height: 100%;
}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;
}
h1,
h2 { margin: 0; text-transform: uppercase; text-shadow: 0 0 0.5em black;
}
h2 { font-weight: 300;
}
input { border: 1px solid #666; background: #333; color: #fff; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em auto; text-align: center;
}
a { color: orange; text-decoration: none; -webkit-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;
}
a:hover { color: yellow;
}
.container { display: block; margin: 2em 0;
}
p { max-width: 40em; margin: 1em auto;
}

SVG Button Animation - Script Codes JS Codes

jQuery(document).ready(function(){ $('.btn-svg').each(function(){ var $this = $(this), width = $this.outerWidth(), height = $this.outerHeight(), $svg = $this.find('svg'), $rect = $svg.find('rect'), totalPerimeter = width*2+height*2; $svg[0].setAttribute('viewBox', '0 0 '+width+' '+height); $rect.attr('width', width); $rect.attr('height', height); $rect.css({ strokeDashoffset: totalPerimeter, strokeDasharray: totalPerimeter }); });
});
SVG Button Animation - Script Codes
SVG Button Animation - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 4.5
Size 4,333 Kb
Views 58,696
Do you need developer help for SVG Button Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jon Christensen (JMChristensen) Script Codes
Name
CSS Banners
SVG Circle Progress
Panel Navigation
Graphs and Snap.svg
Custom Stagger Start Point
Responsive SVG Overlay
Section Diagonal Areas
Animated gradient text
Image Cover
Vue JS Filtering
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!