Javascript HTML Web中不提供材质按钮动画

我试图使我的网站按钮的材料设计与动画，但只有按钮来作为结果，没有动画！我猜JavaScript没有被检测到。 我是网页设计新手！有人请帮帮我！ 请在下面检查我是否犯了错误。

物料按钮
html{
背景：鲑鱼；
}
* {
颜色：白色；
字体系列：“开放式Sans”，无衬线；
}
.包裹{
边缘顶部：20px；
文本对齐：居中；
}
.按钮{
显示：内联块；
保证金：0.3em；
填充物：1.2em 5em；
溢出：隐藏；
位置：相对位置；
文字装饰：无；
文本转换：大写；
边界半径：3px；
-webkit转换：0.3s；
-moz跃迁：0.3s；
-ms转换：0.3s；
-o-转变：0.3s；
过渡：0.3s；
盒影：0 2px 10px rgba（0,0,0,0.5）；
边界：无；
字体大小：15px；
文本对齐：居中；
}
.按钮：悬停{
盒影：1px6px15pxRGBA（0,0,0,0.5）；
}
格林先生{
背景色：#4CAF50；
颜色：白色；
}
瑞德先生{
背景色：#F44336；
颜色：白色；
}
蓝先生{
背景色：#03A9F4；
颜色：白色；
}
.涟漪{
位置：绝对位置；
背景：rgba（0,0,0,25）；
边界半径：100%；
变换：比例（0.2）；
不透明度：0；
指针事件：无；
-webkit动画：ripple.75s放松；
-moz动画：ripple.75秒放松；
动画：涟漪。75秒放松；
}
@-webkit关键帧纹波{
从{
不透明度：1；
}
到{
变换：尺度（2）；
不透明度：0；
}
}
@-moz关键帧纹波{
从{
不透明度：1；
}
到{
变换：尺度（2）；
不透明度：0；
}
}
@关键帧波纹{
从{
不透明度：1；
}
到{
变换：尺度（2）；
不透明度：0；
}
}
$（'.button'）.mousedown（函数（e）{
var目标=e.target；
var rect=target.getBoundingClientRect（）；
var-ripple=target.querySelector（'.ripple'）；
$（涟漪）.remove（）；
ripple=document.createElement（'span'）；
ripple.className='ripple'；
ripple.style.height=ripple.style.width=Math.max（rect.width，rect.height）+“px”；
target.appendChild（ripple）；
var top=e.pageY-rect.top-ripple.offsetHeight/2-document.body.scrollTop；
var left=e.pageX-rect.left-ripple.offsetWidth/2-document.body.scrollLeft；
ripple.style.top=top+px；
ripple.style.left=左+像素；
返回false；
});
材料设计按钮

这有两个问题：

jqueryjavascript不包括在内。你可以让谷歌为你托管它，或者把它放在你的项目中并引用它。并不是说javascript没有被“检测到”，而是jquery在页面上还不存在。当单击您发布的链接中的设置按钮，然后单击javascript选项卡时，您可以看到该示例从何处获得jquery

除此之外，button事件是在文档准备就绪之前绑定的

下面是一个同时包含这两个元素的示例-脚本标记添加到按钮事件上方，按钮事件代码包装在$（function（）{…}）；，jQuery的文档就绪功能的简写

物料按钮
html{
背景：鲑鱼；
}
* {
颜色：白色；
字体系列：“开放式Sans”，无衬线；
}
.包裹{
边缘顶部：20px；
文本对齐：居中；
}
.按钮{
显示：内联块；
保证金：0.3em；
填充物：1.2em 5em；
溢出：隐藏；
位置：相对位置；
文字装饰：无；
文本转换：大写；
边界半径：3px；
-webkit转换：0.3s；
-moz跃迁：0.3s；
-ms转换：0.3s；
-o-转变：0.3s；
过渡：0.3s；
盒影：0 2px 10px rgba（0,0,0,0.5）；
边界：无；
字体大小：15px；
文本对齐：居中；
}
.按钮：悬停{
盒影：1px6px15pxRGBA（0,0,0,0.5）；
}
格林先生{
背景色：#4CAF50；
颜色：白色；
}
瑞德先生{
背景色：#F44336；
颜色：白色；
}
蓝先生{
背景色：#03A9F4；
颜色：白色；
}
.涟漪{
位置：绝对位置；
背景：rgba（0,0,0,25）；
边界半径：100%；
变换：比例（0.2）；
不透明度：0；
指针事件：无；
-webkit动画：ripple.75s放松；
-moz动画：ripple.75秒放松；
动画：涟漪。75秒放松；
}
@-webkit关键帧纹波{
从{
不透明度：1；
}
到{
变换：尺度（2）；
不透明度：0；
}
}
@-moz关键帧纹波{
从{
不透明度：1；
}
到{
变换：尺度（2）；
不透明度：0；
}
}
@关键帧波纹{
从{
不透明度：1；
}
到{
变换：尺度（2）；
不透明度：0；
}
}
$（函数（）{
$（'.button'）.mousedown（函数（e）{
var目标=e.target；
var rect=target.getBoundingClientRect（）；
无功纹波