SVG Button Morphing Lab

v1.0
EXPLORE NETWORK
TL
TR
BR
BL
React
HTML + JS
CSS

            

            

              

            

            

              

            

            
          

        

      

      

      
      

        
        

          
Notch Shape


          

            

              
Notch Size (hover)

              
            

            
35

          

          

            

              
Notch Size (default)

              
            

            
12

          

          

            

              
Notch Curvature

              
            

            
0

          

          

            

              
Corner Radius (inactive)

              
            

            
8

          

          

            

              
Animation Speed

              
            

            
0.12

          

          

            

              
Stroke Width

              
            

            
1.5

          

        


        
        

          
Active Corners

          

            

              

              Top Left
            

            

              

              Top Right
            

            

              

              Bot Left
            

            

              

              Bot Right
            

          

        


        
        

          
Hover Behavior

          

            Fill on hover
            
          

          

            Stroke color only
            
          

          

            Invert text on hover
            
          

        


        
        

          
FX


          
          

            HUD Corner Brackets
            
          

          

            
Bracket Options

            

              

                
Bracket Size

                
              

              
12

            

            

              

                
Offset (− overlaps, + away)

                
              

              
6

            

            

              

                
Corner Radius

                
              

              
0

            

            

              Flip outward
              
            

          


          
          

            Click Ripple
            
          

          

            
Ripple Options

            

              

                
Scale Amount

                
              

              
1.6

            

            

              

                
Ripple Count

                
              

              
2

            

            

              Dashed stroke
              
            

            
            
            
          


          
          

            Text Glitch on Hover
            
          

        


        
        

          
Accent Color

          

            

            

            

            

            

            

            

            

          

          

            CUSTOM
            
          

        


        
        

          
Presets