7种按钮悬停动画效果
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); html { font-size: 62.5%; } .btn-group { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; height: 100vh; } .btn { padding: 2rem 4rem; border: none; border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 1.5rem; letter-spacing: 1px; cursor: pointer; transition: all .5s; background: transparent; position: relative; } .btn:focus { outline: none; } .btn--1 { background: #F4E353; } .btn--1:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); } .btn--2 { background: transparent; position: relative; display: inline-block; } .btn--2::before, .btn--2::after { position: absolute; left: 0; content: ''; width: 100%; height: 2px; background: #000; transform: scaleX(0); transform-origin: center; transition: all .4s; } .btn--2::before { top: 0; } .btn--2::after { bottom: 0; } .btn--2:hover { letter-spacing: 3px; } .btn--2:hover::before, .btn--2:hover::after { transform: scaleX(1); } .btn--3 { transition: all .5s; } .btn--3:hover { transform: translateY(-5px); background: #1779ff; transition: 1s; box-shadow: 10px 10px 67px 17px #1779ff; color: #fff; } .btn--4 { color: #000; } .btn--4:hover { color: #fff; } .btn--4::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; transition: all .5s; transform: scaleY(0); z-index: -1; } .btn--4:hover::before { transform: scaleY(1); } .btn--5:hover { color: #fff; } .btn--5::before { position: absolute; height: 100%; width: 1%; content: ''; background: #000; top: 0; left: 0; z-index: -1; transform: scaleY(0); transform-origin: center; transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s; } .btn--5:hover::before { transform: scaleY(1); width: 100%; } .btn--6 { overflow: hidden; transition: background .5s; } .btn--6:hover { background: #000; color: #fff; } .btn--6::before { content: ""; position: absolute; width: 200%; height: 20px; top: -100%; right: 0; background-color: rgba(255, 255, 255, 0.5); transform: rotat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0