Commit2550075

committed

Added Project #13 - Button Ripple Effect

1 parent2b99506 commit2550075Copy full SHA for 2550075

File tree

+83

-0

lines changed

+83

-0

lines changed

Lines changed: 13 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,13 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<htmllang="en">`
	`3`	`+<head>`
	`4`	`+<metacharset="UTF-8"/>`
	`5`	`+<metaname="viewport"content="width=device-width, initial-scale=1.0"/>`
	`6`	`+<linkrel="stylesheet"href="style.css"/>`
	`7`	`+<title>Document</title>`
	`8`	`+</head>`
	`9`	`+<body>`
	`10`	`+<buttonclass="btn btn-ripple">Ripple Effect</button>`
	`11`	`+<scriptsrc="script.js"></script>`
	`12`	`+</body>`
	`13`	`+</html>`

Lines changed: 23 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,23 @@`
	`1`	`+constbtns=document.querySelectorAll(".btn-ripple");`
	`2`	`+`
	`3`	`+btns.forEach((btn)=>{`
	`4`	`+btn.addEventListener("click",function(e){`
	`5`	`+letx_coord=e.clientX;`
	`6`	`+lety_coord=e.clientY;`
	`7`	`+`
	`8`	`+letbtn_top_pos=e.target.offsetTop;`
	`9`	`+letbtn_left_pos=e.target.offsetLeft;`
	`10`	`+`
	`11`	`+letx=x_coord-btn_left_pos;`
	`12`	`+lety=y_coord-btn_top_pos;`
	`13`	`+`
	`14`	`+constspan=document.createElement("span");`
	`15`	`+span.classList.add("ripple");`
	`16`	+span.style.top=`${y}px`;
	`17`	+span.style.left=`${x}px`;
	`18`	`+`
	`19`	`+this.appendChild(span);`
	`20`	`+`
	`21`	`+setTimeout(()=>this.removeChild(span),500);`
	`22`	`+});`
	`23`	`+});`

Lines changed: 47 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,47 @@`
	`1`	`+body {`
	`2`	`+font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;`
	`3`	`+min-height:100vh;`
	`4`	`+display: grid;`
	`5`	`+place-items: center;`
	`6`	`+}`
	`7`	`+`
	`8`	`+.btn {`
	`9`	`+padding:1rem2rem;`
	`10`	`+font-size:2rem;`
	`11`	`+outline: none;`
	`12`	`+border: none;`
	`13`	`+}`
	`14`	`+`
	`15`	`+.btn-ripple {`
	`16`	`+position: relative;`
	`17`	`+background-image:linear-gradient(15deg,#13547a0%,#80d0c7100%);`
	`18`	`+color:#f3f3f3;`
	`19`	`+border-radius:4rem;`
	`20`	`+overflow: hidden;`
	`21`	`+transition: box-shadow0.3s ease-in-out;`
	`22`	`+cursor: pointer;`
	`23`	`+}`
	`24`	`+`
	`25`	`+.btn-ripple:hover {`
	`26`	`+box-shadow:0px0px0px4pxrgba(0,0,0,0.1);`
	`27`	`+}`
	`28`	`+`
	`29`	`+.ripple {`
	`30`	`+position: absolute;`
	`31`	`+background-color:rgba(0,0,0,0.5);`
	`32`	`+transform:translate(-50%,-50%);`
	`33`	`+animation: rippleEffect0.3s ease-out;`
	`34`	`+border-radius:50%;`
	`35`	`+}`
	`36`	`+`
	`37`	`+@keyframes rippleEffect {`
	`38`	`+from {`
	`39`	`+width:0px;`
	`40`	`+height:0px;`
	`41`	`+ }`
	`42`	`+to {`
	`43`	`+width:300px;`
	`44`	`+height:300px;`
	`45`	`+opacity:0;`
	`46`	`+ }`
	`47`	`+}`

Comments

(0)