{"html":"\n","css":".btn-small {\n position: relative;\n padding: 0;\n width: 100px; /* Smaller width */\n height: 100px; /* Smaller height */\n border: 2px solid #888888;\n outline: none;\n background-color: #f4f5f6;\n border-radius: 20px; /* Adjusted border-radius */\n box-shadow:\n -3px -10px 15px #ffffff,\n -3px -5px 8px #ffffff,\n -10px 0px 15px #ffffff,\n 3px 10px 12px rgba(0, 0, 0, 0.2);\n transition: 0.3s ease-in-out; /* Smooth animation */\n cursor: pointer;\n}\n\n/* Hover animation: Scaling the button and adjusting shadow */\n.btn-small:hover {\n transform: scale(1.1); /* Button grows slightly */\n box-shadow:\n -3px -15px 20px #ffffff,\n -3px -10px 10px #ffffff,\n -10px 0px 15px #ffffff,\n 5px 15px 15px rgba(0, 0, 0, 0.3);\n}\n\n/* Active click animation */\n.btn-small:active {\n transform: scale(0.95); /* Button shrinks slightly */\n box-shadow: none; /* Shadow disappears when clicked */\n}\n\n.btn-small-content {\n position: relative;\n display: grid;\n padding: 10px; /* Smaller padding */\n width: 100%;\n height: 100%;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n box-shadow:\n inset 0px -4px 0px #dddddd,\n 0px -4px 0px #f4f5f6;\n border-radius: 20px;\n transition: 0.3s ease-in-out; /* Smooth animation */\n z-index: 1;\n}\n\n/* Icon hover effect: Floating effect */\n.btn-small-icon {\n position: relative;\n display: flex;\n transform: translate3d(0px, -2px, 0px);\n grid-column: 4;\n align-self: start;\n justify-self: end;\n width: 16px; /* Smaller icon size */\n height: 16px;\n transition: 0.3s ease-in-out; /* Smooth hover animation */\n}\n\n/* Hover effect on icon */\n.btn-small:hover .btn-small-icon {\n transform: translateY(-8px); /* Move the icon up slightly on hover */\n}\n\n/* Icon styling */\n.btn-small-icon svg {\n width: 16px; /* Smaller icon */\n height: 16px;\n fill: #aaaaaa;\n}\n\n/* Text hover effect: Floating effect */\n.btn-small-text {\n position: relative;\n transform: translate3d(0px, -2px, 0px); /* Smaller translation */\n margin: 0;\n align-self: end;\n grid-column: 1 / 5;\n grid-row: 2;\n text-align: center;\n font-size: 16px; /* Smaller font size */\n background-color: #888888;\n color: transparent;\n text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);\n -webkit-background-clip: text;\n background-clip: text;\n transition: 0.3s ease-in-out;\n}\n\n/* Hover effect on text */\n.btn-small:hover .btn-small-text {\n transform: translateY(-5px); /* Move the text up slightly on hover */\n}\n"}

stale-dog-84

👁 实时预览

📝 源代码