mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
55 lines
2.2 KiB
HTML
55 lines
2.2 KiB
HTML
|
|
<button class="btn"><svg class="svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000" preserveAspectRatio="xMidYMid meet">
|
|
<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
|
|
<path d="M200 2525 c-60 -19 -123 -74 -152 -133 -22 -44 -23 -60 -26 -269 -4 -213 -3 -222 17 -242 l21 -21 1180 0 1180 0 -2 -820 -3 -820 -38 -37 -37 -38 -1058 0 c-1041 0 -1057 0 -1084 20 -60 44 -58 23 -58 729 0 633 0 646 -20 666 -11 11 -29 20 -40 20 -11 0 -29 -9 -40 -20 -20 -20 -20 -33 -20 -663 0 -738 -2 -716 80 -797 84 -85 13 -80 1180 -80 1167 0 1096 -5 1180 80 85 84 80 13 80 1180 0 1167 5 1096 -80 1180 -84 85 -12 80 -1184 79 -853 0 -1039 -3 -1076 -14z m231 -254 c64 -65 20 -171 -71 -171 -33 0 -48 6 -71 29 -64 65 -20 171 71 171 33 0 48 -6 71 -29z m400 0 c64 -65 20 -171 -71 -171 -33 0 -48 6 -71 29 -64 65 -20 171 71 171 33 0 48 -6 71 -29z m1427 -27 c30 -20 30 -68 0 -88 -20 -14 -82 -16 -482 -16 -413 0 -461 2 -478 17 -22 20 -23 61 -1 85 15 17 43 18 477 18 402 0 464 -2 484 -16z"></path>
|
|
</g>
|
|
</svg>
|
|
<i class="fas fa-fingerprint"></i>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by JkHuger - Tags: neumorphism, button */
|
|
button {
|
|
width: 60px;
|
|
height: 60px;
|
|
transform: scale(1);
|
|
border-style: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
background: rgb(228, 232, 236);
|
|
background: linear-gradient(45deg, rgb(228, 232, 236) 0%, rgb(234 234 234) 100%);
|
|
box-shadow: -2px -7px 10px #f1f1f1, 4px 6px 10px #d4d7da;
|
|
transition: all .3s;
|
|
}
|
|
|
|
button:active {
|
|
background: rgb(218, 221, 224);
|
|
background: linear-gradient(45deg, rgb(218, 221, 224) 0%, rgb(241, 241, 241) 100%);
|
|
box-shadow: -2px -7px 10px #d4d7da,
|
|
4px 6px 10px #f1f1f1,
|
|
inset -2px -7px 10px #f1f1f1,
|
|
inset 4px 6px 10px #d4d7da;
|
|
transition: all .3s;
|
|
transform: scale(.95);
|
|
}
|
|
|
|
button i {
|
|
font-size: 20px;
|
|
background: linear-gradient(-45deg, gray 0%, lightgray 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
transition: all .3s;
|
|
}
|
|
|
|
button:active i {
|
|
transform: scale(.9);
|
|
transition: all .3s;
|
|
}
|
|
|
|
.svg {
|
|
width: 25px;
|
|
height: 60px;
|
|
border-style: none;
|
|
align-items: center;
|
|
}
|
|
</style>
|