本文主要是介绍扁平按钮样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
上图
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>扁平按钮</title><style>body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background: #efeeee;gap: 30px;}.img {width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;border-radius: 20px;box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2), -18px -18px 30px rgba(255, 255, 255, 1);transition: all 0.2s ease-out;}.img svg {width: 60px;height: 60px;transition: all 0.2s ease-out;}.img:nth-child(1) svg path {fill: #01b4ff;}.img:nth-child(2) svg path {fill: #000000;}.img:nth-child(3) svg path {fill: #1abc9c;}.img:nth-child(4) svg path {fill: #4B80EE;}.img:nth-child(5) svg path {fill: orangered;}.img:hover {cursor: pointer;box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 18px 18px 30px rgba(0, 0, 0, 0.1), inset -18px -18px 30px rgba(255, 255, 255, 0.1);}.img:hover svg {width: 58px;height: 58px;}</style>
</head>
<body>
<div class="img"><svg t="1701656095047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="4211" width="200" height="200"><path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z"fill="#272636" p-id="4212"></path></svg>
</div>
<div class="img"><svg t="1701656123741" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="5318" width="200" height="200"><path d="M937.4 423.9c-84 0-165.7-27.3-232.9-77.8v352.3c0 179.9-138.6 325.6-309.6 325.6S85.3 878.3 85.3 698.4c0-179.9 138.6-325.6 309.6-325.6 17.1 0 33.7 1.5 49.9 4.3v186.6c-15.5-6.1-32-9.2-48.6-9.2-76.3 0-138.2 65-138.2 145.3 0 80.2 61.9 145.3 138.2 145.3 76.2 0 138.1-65.1 138.1-145.3V0H707c0 134.5 103.7 243.5 231.6 243.5v180.3l-1.2 0.1"p-id="5319"></path></svg>
</div>
<div class="img"><svg t="1701656140956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="6345" width="200" height="200"><path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"fill="#5D5D5D" p-id="6346"></path></svg>
</div>
<div class="img"><svg t="1701656175665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="7463" width="200" height="200"><path d="M492.343 777.511c-67.093 32.018-144.129 51.939-227.552 32.27-83.424-19.678-142.626-73.023-132.453-171.512 10.192-98.496 115.478-132.461 202.07-132.461 86.622 0 250.938 56.122 250.938 56.122s13.807-30.937 27.222-66.307c13.405-35.365 17.21-63.785 17.21-63.785H279.869v-35.067h169.995v-67.087l-211.925 1.526v-44.218h211.925v-100.63h111.304v100.629H788.35v44.218l-227.181 1.524v62.511l187.584 1.526s-3.391 35.067-27.17 98.852c-23.755 63.783-46.061 96.312-46.061 96.312L960 685.279V243.2C960 144.231 879.769 64 780.8 64H243.2C144.231 64 64 144.231 64 243.2v537.6C64 879.769 144.231 960 243.2 960h537.6c82.487 0 151.773-55.806 172.624-131.668L625.21 672.744s-65.782 72.748-132.867 104.767z"p-id="7464"></path><path d="M297.978 559.871c-104.456 6.649-129.974 52.605-129.974 94.891s25.792 101.073 148.548 101.073c122.727 0 226.909-123.77 226.909-123.77s-141.057-78.842-245.483-72.194z"p-id="7465"></path></svg>
</div>
<div class="img"><svg t="1701656200898" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="8450" width="200" height="200"><path d="M445.7 562c4.6-0.3 329.5-26.8 351.1-23.4 21.6 3.5 108.1 0.9 112.4 34.6 4.3 33.3 0 65.7 0 65.7s-192 33.7-196.3 38.1c-4.3 4.3-19.9 19.9-19 43.2 0.9 23.4 0.9 114.2 1.7 116.8 0.9 2.6 5.2 19.9 38.1 16.4 25.9-2.7 51.7-11.9 61.6-15.6 2.5-1 4.1-3.4 3.8-6.1l-1.8-23.4c-0.3-3.6-3.7-6.2-7.2-5.5l-49.5 9.9v-93.4l160.4-29c3.4-0.6 6.6 1.9 6.7 5.4l5.3 158.2s9.1 39.3-58.3 53.2-229.1 54.5-244.7 55.3c-15.6 0.9-41.5 0.9-68.3-6.1-18.9-4.9-42.2-13.7-54.2-18.4-4.1-1.6-5.5-6.7-2.9-10.2l59-80.2c2.2-2.9 3.3-6.5 3.3-10.1V749c0-4.6-1.8-8.9-4.9-12.2L415.7 604c-3.4-3.6-4.9-8.5-4.2-13.4 1.5-10.5 8.2-27.1 34.2-28.6z"p-id="8451"></path><path d="M360.2 616.3c-2.2-2.3-5.1-3.7-8.2-4.2l-226.9-33.3c-3.2-0.6-6.5-0.3-9.4 1.1-9.9 4.6-31.5 18.2-38.5 51.9v266.6s3.2 53.2 76.5 77.8c73.3 24.6 162.8 46.7 162.8 46.7s49.9 9.7 70.1-31.1c20.1-40.9 116.1-157.6 116.1-157.6v-70.7L360.2 616.3zM301 934.1c-23.4-0.6-118.5-13.7-148.5-40.9-27.2-24.6-13.6-218.6-13.6-218.6s0.5-22.5 13.6-20.1l151.1 27.2s18.8 11 18.8 26.6v209.5c0 0.1 2 17-21.4 16.3zM946.8 314c0-103.5-79.9-187.5-178.5-187.5-56.2 0-106.4 27.3-139.1 70C603 83.6 509.3 0 397.7 0 265.9 0 159 116.6 159 260.4s106.9 260.4 238.7 260.4c6.9 0 13.8-0.4 20.6-1.1L775 501.3c1.6-0.1 3.1-0.1 4.7-0.2l5-0.3-0.1-0.1c90.9-8.7 162.2-89 162.2-186.7z m-503.5 92.7c-66.7 0-120.8-62.2-120.8-139s54.1-139 120.8-139 120.8 62.2 120.8 139-54.1 139-120.8 139z m353.3-6.4c-44 0-79.7-41-79.7-91.7s35.7-91.7 79.7-91.7 79.7 41 79.7 91.7-35.7 91.7-79.7 91.7z"p-id="8452"></path></svg>
</div>
</body>
</html>
这篇关于扁平按钮样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
