CSS八种让人眼前一亮的HOVER效果，事件分发流程图

}

GIF效果

四.圆形效果

HTML

// 这里有一个svg元素

Hover me

CSS

#circle-btn {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

.btn-container {

position: relative;

}

button {

border: 0;

border-radius: 50px;

color: white;

background: #5f55af;

padding: 15px 20px 16px 60px;

text-transform: uppercase;

background: linear-gradient(to right, #f72585 50%, #5f55af 50%);

background-size: 200% 100%;

background-position: right bottom;

transition:all 2s ease;

}

svg {

background: #f72585;

padding: 8px;

border-radius: 50%;

position: absolute;

left: 0;

top: 0%;

}

button:hover {

background-position: left bottom;

}

GIF图

五.圆角效果

HTML

Hover me

CSS

#border-btn {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

button {

border: 0;

border-radius: 10px;

background: #2ec4b6;

te