button click Effect (water ripple)

Recently saw a good button click Effect, when clicked to produce a ripple effect, very fun, so simple implementation of the next (not considering the low version of browser compatibility issues)

First look at the effect bar, such as (recording GIF software A little slag, looks like Kaka's ...) ）

This effect can be implemented by nesting canves elements, or by CSS3.

Canves implementation

Online picked up a copy of the canves implementation of the code, slightly removed some of the duplicate definition of the style and give the JS comment, the code is as follows

HTML code

<class= "btn color-1 material-design"  data-color= "#2f5398" > Press me! </ a >

View Code

CSS Code

* {box-sizing:Border-box;Outline:None;}Body{font-family:' Open Sans ';font-size:100%;Font-weight: -;Line-height:1.5em;text-align:Center;}. BTN{Border:None;Display:Inline-block;Color: White;Overflow:Hidden;margin:1rem;padding:0;width:150px;Height:40px;text-align:Center;Line-height:40px;Border-radius:5px;}. Btn.color-1{Background-color:#426fc5;}. Btn-border.color-1{Background-color:Transparent;Border:2px solid #426fc5;Color:#426fc5;}. Material-design{position:relative;}. Material-design Canvas{Opacity:0.25;position:Absolute;Top:0; Left:0;}. Container{align-content:Center;Align-items:Flex-start;Display:Flex;flex-direction:Row;Flex-wrap:Wrap;justify-content:Center;margin:0 Auto;Max-width:46rem;}

View Code

JS Code

varCanvas ={}, CenterX= 0, CenterY= 0, Color= ' ', Containers= Document.getelementsbyclassname (' material-design ') Context={}, Element={}, Radius= 0,    //generate Requestanimationframe animations based on callbackRequestanimframe =function () {      return(Window.requestanimationframe||Window.mozrequestanimationframe||Window.orequestanimationframe||Window.msrequestanimationframe||function(callback) {Window.settimeout (callback,1000/60);    }      ); } (),    //generates canves for each specified elementinit =function() {containers=Array.prototype.slice.call (containers);  for(vari = 0; i < containers.length; i + = 1) {Canvas= document.createelement (' Canvas '); Canvas.addeventlistener (' Click ', press,false);        Containers[i].appendchild (canvas); Canvas.style.width= ' 100% '; Canvas.style.height= ' 100% '; Canvas.width=Canvas.offsetwidth; Canvas.height=Canvas.offsetheight; }    },    //tap and get the data you want, such as click Coordinates, element size, colorPress =function(event) {color=Event.toElement.parentElement.dataset.color; Element=event.toelement; Context= Element.getcontext (' 2d '); Radius= 0; CenterX=Event.offsetx; CenterY=event.offsety; Context.clearrect (0, 0, Element.width, element.height);    Draw (); },    //draw a circle, and perform an animationDraw =function() {Context.beginpath (); Context.arc (CenterX, CenterY, radius,0, 2 * math.pi,false); Context.fillstyle=color;      Context.fill (); Radius+ = 2; //continuously Draw radius + = 2 Circle by judging radius less than element width      if(Radius <element.width) {requestanimframe (draw); }};init ();

View Code

CSS3 implementation

The next is the pure hand code ... I think it is more convenient to realize the CSS3, it may be the CSS writing habits ...

HTML code

<class= "Waves ts-btn">Press me! </ a >

CSS Code

. Waves{position:relative;cursor:Pointer;Display:Inline-block;Overflow:Hidden;text-align:Center;-webkit-tap-highlight-color:Transparent;Z-index:1;}. Waves. Waves-animation{position:Absolute;Border-radius:50%;width:25px;Height:25px;Opacity:0;background:Rgba (255,255,255,0.3);transition:All 0.7s ease-out;Transition-property:transform, opacity,-webkit-transform;-webkit-transform:Scale (0);Transform:Scale (0);pointer-events:None}. Ts-btn{width:200px;Height:56px;Line-height:56px;background:#f57035;Color:#fff;Border-radius:5px;}

JS Code

Document.addeventlistener (' domcontentloaded ',function(){      varDuration = 750; //style string pieced together      varForstyle =function(position) {varCssstr = ' ';  for(varKeyinchposition) {          if(Position.hasownproperty (key)) Cssstr + = key+ ': ' +position[key]+ '; ';        }; returnCssstr; }      //get mouse click Position      varForrect =function(target) {varPosition ={top:0, left:0}, Ele=document.documentelement; ' Undefined '! =typeofTarget.getboundingclientrect && (position =target.getboundingclientrect ()); return{top:position.top+ Window.pageyoffset-Ele.clienttop, Left:position.left+ Window.pagexoffset-Ele.clientleft}}varShow =function(event) {varPdiv =Event.target, Cdiv= document.createelement (' div ');        Pdiv.appendchild (CDIV); varRectobj =Forrect (pdiv), _height= Event.pagey-Rectobj.top, _left= Event.pagex-Rectobj.left, _scale= ' scale (' + pdiv.clientwidth/100 * 10 + ') '; varPosition ={top: _height+ ' px ', left: _left+ ' px '        }; Cdiv.classname= Cdiv.classname + "Waves-animation", Cdiv.setattribute ("Style", Forstyle (position)), position["-webkit-transform"] =_scale, position["-moz-transform"] =_scale, position["-ms-transform"] =_scale, position["-o-transform"] =_scale, Position.transform=_scale, Position.opacity= "1", position["-webkit-transition-duration"] = Duration + "MS", position["-moz-transition-duration"] = Duration + "MS", position["-o-transition-duration"] = Duration + "MS", position["Transition-duration"] = Duration + "MS", position["-webkit-transition-timing-function"] = "Cubic-bezier (0.250, 0.460, 0.450, 0.940)", position["-moz-transition-timing-function"] = "Cubic-bezier (0.250, 0.460, 0.450, 0.940)", position["-o-transition-timing-function"] = "Cubic-bezier (0.250, 0.460, 0.450, 0.940)", position["Transition-timing-function"] = "Cubic-bezier (0.250, 0.460, 0.450, 0.940)", Cdiv.setattribute ("Style", Forstyle (position)); varFinishstyle ={opacity:0,          "-webkit-transition-duration": Duration + "MS",//transition Time"-moz-transition-duration": Duration + "MS",          "-o-transition-duration": Duration + "MS",          "Transition-duration": Duration + "MS",          "-webkit-transform": _scale,"-moz-transform": _scale,"-ms-transform": _scale,"-o-transform": _scale, top: _height+ "px", left: _left+ "px",        }; SetTimeout (function() {Cdiv.setattribute ("Style", Forstyle (Finishstyle)); SetTimeout (function() {pdiv.removechild (cdiv);        },duration); },100)} document.queryselector ('. Waves '). AddEventListener (' click ',function(e) {show (E); },!1); },!1);

That's all, the principle is simple, get click location > Add style by the way, mid-Autumn Happy ~

button click Effect (water ripple)