第一篇小小博客

第一篇小小博客
最近感觉学前端已经走火入魔了😂
每当写成一个小块，内心就小小的激动一下（这不是真的我，我可是很沉稳的！！！）
最近收获最大的就是将CSS3按钮中的几种样式结合到一起：
css文件是这样的：
`.button {
width: 9em;
background-color: #30c39e;
border-radius: 0.5em;
color: #FFC107;
font-size: 1em;
text-align: center;
padding: 1em 2em;
text-decoration: none;
display: inline-block;
margin: 0.25em 0.15em;
cursor: pointer;
transition:all 0.5s;
}
.button1{
background-color: white;
color: black;
border: 2px solid #30c39e;
}
.button1 span{
display: inline-block;
position: relative;
transition: 0.5s;
}

.button1 span:after{
content: “»”;
position: absolute;
opacity: 0;
top: 0;
right: -1em;
transition: 0.5s;
}
.button1:hover span {
padding-right: 1em;
}
.button1:hover span:after {
opacity: 1;
right: 0;
}
.button1:hover {
background-color: #30c39e;
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}`
html文件是这样的：

<button class="button button1"><span>join now</span></button>

如此一来就把 鼠标悬停按钮背景颜色改变 ， 按钮阴影 和 鼠标移动到按钮上后添加箭头标记 做出来了；我当时还想再加个 点击时添加波纹效果 ，结果发现和 鼠标移动到按钮上后添加箭头标记 的效果有冲突，再后来也没再继续尝试，如果哪个小伙伴会得话，欢迎指教哟~
还有啊（小声说）如果上面代码哪里写错了，你可一定要偷偷告诉我，我立马改！！！