按钮鼠标移入效果

先设置两个按钮的基本样式

.button{

            flex: 0 0 40%;

            margin: 10px;

            height: 60px;

            display: flex;

            justify-content: center;

            align-items: center;

            border: 1px solid #48a6b1;

            color: #36aebb;

            transition: .3s;

            background-color: white;

            overflow: hidden;

            position: relative;

第一个按钮

 

HTML:

<button class="button17">

      <span>Diagonal Close</span>

</button>

CSS样式：

 

伪类::before这个伪元素允许在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

transform通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

transition设置2D旋转的时长。

伪类:hover设置鼠标移入按钮后触发动画。

.button17:hover::before,这行代码是鼠标移入按钮后触发伪类::before在元素内容最前面插入的内容，发生改变.按钮::before在元素前面设置的内容，超出按钮全部隐藏,鼠标移入后归位。

 

第二个按钮

 

HTML:

<button class="button18">

      <span>Diagonal Close</span>

</button>

CSS:

 

dox-shadow:设置边框样式。

标签：鼠标,伪类,元素,移入,按钮,before
来源： https://blog.csdn.net/TBDBTUO/article/details/117033835