悬浮按钮按下特效-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.7890.........完整代码请登录后点击上方下载按钮下载查看