Follow us on - Dribbble | Twitter | Facebook

Button group animation in SVG


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.

HTML Markup

Before we start, First make an HTML structure with wrapper div with class name “btn-grp”. and add buttons to that.

SVG Code

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.
position: relative;
.btn-grp input[type=button]{
position: relative;
z-index: 2;
display: inline-block;
font-family: ‘Open Sans’, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
padding: 9px 0px;
border: none;
text-align: center;
cursor: pointer;
background: none;
width: 148px;
font-size: 16px;
.btn-grp input[type=button]:focus{
outline: none;

Adding styles to svg such as stroke color, stroke-dashoffset, stroke-dasharray.
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 100%;
path {
fill: none;
stroke: #fff;
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-width: 1;
stroke-dasharray: 314.1260070800781,100000;
stroke-dashoffset: 0px;
opacity: 0.3;

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?

stroke_offset by


Thank you for reading this tutorial, and if you have any question or related work to show, please do. 🙂

You may also like