In most web application we have seen button group are used. What is button group? Grouping a series of buttons together on a single line with the button group.
For example: For 3 actions such as Create/Edit/Delete we can group these three buttons.
In this SVG tutorial, For each button action, we have added animation to the SVG path.
How is it working?
Have you tried our demo of Button group animation in SVG?
Before starting, refer demo shown above.
Okay now, let us see how to add path animation.
Before we start, First make an HTML structure with wrapper div with class name “btn-grp”. and add buttons to that.
SVG code, which looks like the outline for buttons. In below contains four paths,
- First path – By default first button in button group will focus.
- Remaining paths are a border to the button.
Adding styles to buttons such as color, border, backgrount.
font-family: ‘Open Sans’, sans-serif;
padding: 9px 0px;
Adding styles to svg such as stroke color, stroke-dashoffset, stroke-dasharray.
transition: stroke-dashoffset 1s cubic-bezier(0, 0.8, 0.2, 1);
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0, 0.8, 0.2, 1);
-moz-transition: stroke-dashoffset 1s cubic-bezier(0, 0.8, 0.2, 1);
stroke-dasharray is set by total pathlen for one button outline
var path = $(‘#paths’).get(0);
pathLen = path.getTotalLength();
Scripts are used to create a new path on clicking each time and setting stroke-dashoffset to the path.
How to create path and set stroke-dashoffset?
Thank you for reading this tutorial, and if you have any question or related work to show, please do. 🙂