悬浮按钮按下特效-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：悬浮按钮按下特效
代码标签：特效
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*, *:after, *:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

button {
  display: block;
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  border: 2px solid #000;
  backgrond-color: #FFF;
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: .25rem;
  box-shadow: 4px 4px 0 0 #000;
  -webkit-transition: .15s ease;
  transition: .15s ease;
}
button:hover, button:focus {
  outline: 0;
  -webkit-transform: translate(4px, 4px);
          transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 #000;
  background-color: #f2f5f7;
}

p {
  font-size: .875rem;
  margin-top: 2rem;
}
</style>

</head>
<body translate="no">
<div class="container">

<svg width="240px" height="324px" viewBox="0 0 240 324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<title>peep-59</title>
<desc>Created with Sketch.</desc>
<g id="Introduction" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variations" transform="translate(-2046.000000, -758.000000)">
<g id="images" transform="translate(126.000000, 110.000000)">
<g id="a-person/bust" transform="translate(1920.000000, 648.000000)">
<g id="body/Coffee" transform="translate(31.056338, 135.052838)" fill-rule="evenodd">
<path d="M83.2831268,0.670593346 C88.4982676,-3.30215812 101.591155,-5.08870215 107.157211,-1.26347319 C112.654817,2.5778184 113.254149,8.78971282 115.81598,14.5042021 C118.233092,13.3639672 122.224696,14.996973 122.925471,17.2406677 C123.794626,18.2988986 123.833662,21.2720393 124.433028,22.6946381 C150.512324,26.84746 154.471648,47.1875249 157.610662,70.2792352 C161.763338,93.7114309 171.19031,117.09248 167.097845,141.204589 C167.631085,141.976441 168.051507,142.726734 168.440239,143.617787 C169.371718,145.203337 168.17193,147.447666 166.293127,147.360801 C163.861225,147.147126 161.453408,146.855462 159.010099,146.76437 C152.236914,146.529055 145.457544,146.557111 138.681788,146.643229 L137.757845,146.655314 C103.610028,147.08055 69.4641127,147.918554 35.3148169,148.140794 C34.0759437,148.142586 33.4693944,147.031094 33.6348169,145.934609 C33.9679859,143.727055 34.2770704,141.518445 34.5996761,139.309834 C26.522493,141.444049 17.9357324,141.98109 9.8813662,139.534288 C9.31791549,138.960049 11.1941831,139.271368 11.4918592,139.184081 C4.07932394,134.116957 6.29298592,123.442288 6.94960563,115.753787 C11.0325634,89.4087616 12.4719296,60.2597519 28.2470704,37.7790552 C35.0716479,28.6047616 45.0770704,21.3410748 56.5740423,19.7067029 L56.8930027,19.6630145 C60.2547064,19.2146038 64.0012947,19.0701581 66.9405211,17.2406677 C70.2462702,14.6006261 71.6549763,9.72252824 75.1327636,9.67686276 C76.2811463,9.66178379 77.843364,11.1151389 79.5244648,12.1018967 C79.6499625,9.93119407 80.8193221,8.0993165 81.0775031,6.41625703 L81.0984028,6.2723246 C81.367809,4.31010979 80.9988476,2.54474154 83.2831268,0.670593346 Z M139.329946,70.9752595 C132.000919,65.8818221 113.068602,68.4410738 112.635195,68.7262859 C111.6809,69.3542077 111.269958,69.4097401 110.753831,70.2251295 C110.244254,70.2927616 109.735099,70.3629299 109.226366,70.4352117 C108.205732,70.7687225 108.96207,72.0245659 110.140944,71.5765033 C109.431877,74.6356503 111.518593,76.811223 112.349324,79.8355202 C112.619056,80.8174882 112.359059,82.583573 112.349324,83.5869065 C112.429886,84.8661886 113.843732,86.3772841 113.608092,87.6607331 C112.770352,92.2236155 108.224287,96.6746292 110.140944,101.099643 C111.410662,103.59886 115.229535,104.873263 117.768549,105.722891 C123.028901,107.742554 132.19458,105.646844 135.250988,101.099643 C136.881231,98.6742333 138.769943,92.5561327 139.741985,90.6584185 L139.957434,87.648033 C140.488759,80.1647916 140.961377,72.1090514 139.329946,70.9752595 Z" id="🎨-Background" fill="#FFFFFF"></path>
<path d="M73.855838,9.23558513 C74.3618239,8.78731115 75.1105563,9.35055969 74.789007,9.95607828 C74.0664718,11.3169628 73.3253451,12.606411 72.3556268,13.8094168 C71.767669,14.5387867 71.1378803,15.2286341 70.4996408,15.9108728 C72.1375986,17.3283992 73.5423169,19.0883131 74.8688662,20.7376908 C76.5651338,22.8471781 78.1688662,25.0460665 80.0730211,26.9763288 C81.9509294,28.8800013 84.0273658,30.2107338 86.5380303,31.0981128 L87.0451064,31.2743057 C89.5672627,32.1600914 92.2629231,33.3563141 93.6845704,35.7452524 C93.9649225,36.2163523 93.4004155,36.798411 92.9259085,36.5044227 C90.4555563,34.9742466 87.5529507,34.6665205 84.8639366,33.6554207 C82.2664014,32.678771 80.0020352,31.1756477 78.001331,29.2572211 C76.004007,27.3419648 74.3269648,25.1629432 72.577669,23.0299961 C70.8478099,20.9209315 68.9852746,19.119593 66.9391479,17.3351624 C63.7816423,19.4601599 60.1774267,20.384806 56.5125545,21.2929676 L56.1125282,21.3920313 C52.4432324,22.3008376 48.7935845,23.3563209 45.3511901,24.9389119 C42.3161197,26.3340352 39.3309085,28.0001096 36.8586549,30.2704344 C34.2342887,32.6798278 32.1917535,35.7570881 30.3222465,38.7665049 C26.1404155,45.4992798 23.2004155,52.8754051 20.6121761,60.3411429 C17.9202042,68.1065753 15.6685141,76.0275616 13.8507676,84.0425988 C12.9262606,88.119546 12.1754155,92.2254481 11.5583028,96.3600939 C11.2612606,98.3514364 10.9973873,100.347006 10.7656268,102.347014 C10.5182324,104.482708 10.4614014,106.679906 9.80647183,108.733386 C9.52569718,109.613448 8.86273944,109.978661 8.19914789,109.947593 L8.06436423,111.633908 C7.88563521,113.882242 7.71902113,116.13128 7.66273944,118.393573 C7.56937753,122.155186 7.61170932,125.90597 7.88218069,129.659612 L7.92048592,130.171491 C8.13302113,132.911014 8.6079507,135.989119 10.6671761,137.995045 C12.7997113,140.072618 16.0792183,140.725902 18.9535141,140.763311 C25.6479507,140.850599 32.0920352,137.686262 38.0159789,134.910176 C44.1169648,132.051241 50.0512606,128.877816 55.8433732,125.436188 C58.7930915,123.68346 61.7109085,121.872399 64.5915423,120.008501 C66.0051338,119.093566 67.4087958,118.163202 68.8018944,117.217832 C69.5998521,116.676352 70.3559789,116.082669 71.1683028,115.60227 C70.7702746,115.231562 70.5925986,114.648658 70.9259789,114.139726 C68.5777394,112.100618 67.6004155,108.4618 67.4861197,105.517479 C67.3937958,103.140845 67.7434437,100.770975 68.0193592,98.4167436 C68.1585845,97.229589 68.3305563,96.0445479 68.5090775,94.8626771 C68.5796408,94.3958043 68.6335141,93.8963836 68.7159085,93.4035147 C62.3751338,96.8893151 55.8566831,99.9936282 49.1656268,102.751538 C45.7359085,104.16526 42.2622465,105.436321 38.7406268,106.601072 L38.0268495,106.836013 C34.6901066,107.928669 31.2735282,108.960827 27.824007,109.58555 C27.6395704,109.618943 27.4897817,109.346513 27.6866831,109.259648 C31.0483732,107.775757 34.5264718,106.524141 37.9386549,105.15755 L38.4993592,104.92908 L38.4993592,104.92908 C38.4349225,104.925487 38.368162,104.916611 38.2984437,104.899914 C36.2973169,104.416767 34.3118239,103.67218 32.3491479,103.045315 C30.5275986,102.463468 28.4810493,102.098043 26.7784437,101.219671 C26.6474577,101.152039 26.7207676,100.969855 26.8483732,100.96119 C28.7620352,100.828462 30.8394296,101.386427 32.7156972,101.714654 L33.4205485,101.838167 C34.6013192,102.04645 35.8083028,102.2703.........完整代码请登录后点击上方下载按钮下载查看