Button group animation in SVG

button-group

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 in SVG path.

How it is 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 a HTML structure with wrapper div with class name “btn-grp”. and add buttons into that.

SVG Code

SVG code, which look like outline for buttons. In below contains four paths,

  • First path – By default first button in button group will focus.
  • Remaining paths are border to the button.

CSS

Adding styles to buttons such as color, border, backgrount.
.btn-grp{
position: relative;
display:inline-block;
}
.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.
svg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
svg{
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;
}
#paths{
stroke-dasharray: 314.1260070800781,100000;
stroke-dashoffset: 0px;
}
.svg-grp{
opacity: 0.3;
}

stroke-dasharray is set by total pathlen for one button outline

var path = $(‘#paths’).get(0);
pathLen = path.getTotalLength();

Jquery

Scripts are used to create new path on clicking each time and setting stroke-dashoffset to the path.

How to create create path and set stroke-dashoffset?

 

stroke_offset by
$(“#paths”).css({“stroke-dashoffset”:stroke_offset});

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

You may also like