css代码|简单快捷美化按钮（button css美化）
时间：2021-11-06 00:10:47 阅读：981
原网址：https://www.cnblogs.com/lincanghai/p/14345156.html
css按钮的样式#
效果展示 + 代码#
html代码：#
<!DOCTYPE html><head> <meta http-equiv =“Content-Type”content =“text / html; charset = utf-8”/> <title>css3按钮悬停</title> <link rel="stylesheet" type="text/css" href="./01.css"> </head><body> <button class="btn-1">按钮1</button> <button class="btn-2">按钮2</button> <button class="btn-3">按钮3</button> <button class="btn-4">按钮4</button> <button class="btn-5">按钮5</button> <button class="btn-6">按钮6</button></body>
css代码#
总体
body { --primary: 25,91,255; --color: 44, 62, 80; display: flex; align-items: center; justify-content: center; height: 100vh; background: #f4f7f8; height: calc(var(--vh, 1vh) * 100); overflow: hidden; color: rgb(var(--color)); width: 100%; height: 100vh;}* { list-style: none; outline: none; padding: 0; margin: 0; font-family: 'Poppins', sans-serif; box-sizing: border-box;}button { padding: 20px 50px; font-size: 1.5rem; cursor: pointer; border: 0px; background: transparent; position: relative; margin: 20px; transition: all .25s ease;}btn1
.btn-1 { background: #000; color: #fff; border-radius: 30px; transition: all .25s ease;}.btn-1::after,.btn-1::before { content: ''; position: absolute; opacity: .3; background: #000; border-radius: inherit; width: 100%; height: 100%; left: 0px; bottom: 0px; z-index: -1; transition: all .25s ease;}.btn-1:hover { transform: translate(-12px, -12px);}.btn-1:hover:after { transform: translate(6px, 6px);}.btn-1:hover:before { transform: translate(12px, 12px);}btn2
.btn-2:hover::after { transform: translate(-5px, -5px);}.btn-2:hover::before { transform: translate(5px, 5px);}.btn-2::after,.btn-2::before { border: 3px solid #000; content: ''; position: absolute; border-radius: inherit; width: calc(100% - 6px); height: calc(100% - 6px); left: 0px; bottom: 0px; z-index: -1; transition: all .25s ease;}btn3
.btn-3:hover::after { width: 100%;}.btn-3::after { content: ''; position: absolute; border-radius: inherit; width: 10%; height: 5px; background: #000; left: 0px; bottom: 0px; z-index: -1; transition: all .25s ease; left: 50%; transform: translate(-50%);}btn4
.btn-4 { overflow: hidden; color: #fff; border-radius: 30px; box-shadow: 0px -0px 0px 0px rgba(143, 64, 248, .5), 0px 0px 0px 0px rgba(39, 200, 255, .5);}.btn-4:hover { transform: translate(0,-6px); box-shadow: 10px -10px 25px 0px rgba(143, 64, 248, .25), -10px 10px 25px 0px rgba(39, 200, 255, .25);}.btn-4:hover::after { transform: rotate(150deg);}.btn-4::after { content: ''; width: 400px; height: 400px; position: absolute; top: -50px; left: -100px; background-color: #FF3CAC; background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%); z-index: -1; transition: all .5s ease;}btn5
.btn-5:hover { color: #fff;}.btn-5:hover::after { transform: scale(1); opacity: 1;}.btn-5::after { content: ''; width: 100%; height: 100%; border-radius: 30px; position: absolute; top: 0px; left: 0px; transform: scale(.1); background: #000; z-index: -1; opacity: 0; transition: all .25s ease;}
网友评论