【CSS练习】按钮特效

学习内容：

Day64

链接地址
【description】Button: A nice effect for very important buttons with that certain wow factor.

使用盒子阴影制作

html:

<div class="frame">
   <div class="center">
     <p>Happy coding :)</p>
   </div>
 </div>

css

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css2?family=Nabla&display=swap);

@colorA: #2c3e50;
@colorB: linear-gradient(to left, rgb(249, 55, 33), rgb(25, 25, 249));
@colorC: rgb(98, 95, 95);

// use only the available space inside the 400x400 frame
.frame {
  position: relative;
  margin: 40% auto;
  width: 190px;
  height: 70px;
  line-height: 35px;
  border-radius: 2px;
  background: @colorB;
  box-shadow: 15px 15px 0 0 @colorC;
  overflow: hidden;
  border-radius: 10px;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  transition: all 0.5s ease;
	font-family: 'Nabla', cursive;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  &:hover {
    translate: 15px 15px;
    box-shadow: -15px -15px 0 0 @colorC;
  }
}

.center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // transform: translate(-50%,-50%);
  text-transform: uppercase;
  font-weight: 700;
}

效果图

鼠标移入：