mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
123 lines
3.8 KiB
HTML
123 lines
3.8 KiB
HTML
<div class="card">
|
|
<button class="button Explore"><svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="svg">
|
|
<g id="Layer_2" data-name="Layer 2">
|
|
<g id="invisible_box" data-name="invisible box">
|
|
<rect width="48" height="48" fill="none"></rect>
|
|
</g>
|
|
<g id="icons_Q2" data-name="icons Q2">
|
|
<path d="M24,2A22,22,0,1,0,46,24,21.9,21.9,0,0,0,24,2ZM34.7,14.7,28,28,14.7,34.7a1.1,1.1,0,0,1-1.4-1.4L20,20l13.3-6.7A1.1,1.1,0,0,1,34.7,14.7ZM24,22a2,2,0,1,0,2,2A2,2,0,0,0,24,22Z"></path>
|
|
<path d="M24,22a2,2,0,1,0,2,2A2,2,0,0,0,24,22Zm0,0a2,2,0,1,0,2,2A2,2,0,0,0,24,22Z"></path>
|
|
</g>
|
|
</g>
|
|
</svg>Explore</button>
|
|
|
|
<button class="button Post"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="svg">
|
|
<path clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z"></path>
|
|
</svg>Post</button>
|
|
|
|
<button class="button Chat"><svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg">
|
|
<g id="Dribbble-Light-Preview" transform="translate(-140.000000, -999.000000)">
|
|
<g id="icons" transform="translate(56.000000, 160.000000)">
|
|
<path d="M97.1784026,840.884344 C92.8882915,837.134592 86.2359857,839.256228 84.7592414,844.817545 C84.139128,847.151543 84.7373784,848.235292 84.7373784,849.987037 C84.7373784,851.787636 84,854.395812 84,854.395812 C84,854.714855 84.2832249,855.025921 84.6320386,854.935194 C85.8792217,854.609172 87.8627895,853.964107 90.2349218,854.608175 C98.2119249,856.770688 103.330841,846.261214 97.1784026,840.884344 M103.447113,859 C103.395437,859 103.341773,858.993021 103.287115,858.979063 C96.9806421,857.395812 97.4039887,859.174477 93.8999507,858.237288 C92.8395967,857.954137 91.8746446,857.443669 91.0418642,856.781655 C97.4059763,857.561316 102.710728,852.016948 101.771614,845.487535 C102.732591,846.487535 103.438169,847.72582 103.7363,849.11266 C104.584981,853.048852 102.430484,852.38285 103.983749,858.364905 C104.075176,858.714855 103.765119,859 103.447113,859" id="messages_chat-[#1557]">
|
|
|
|
</path>
|
|
</g>
|
|
</g>
|
|
|
|
</svg>Chat</button>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by aadium - Tags: neumorphism, card */
|
|
.card {
|
|
background-color: #e4e4e4;
|
|
border-radius: 15px;
|
|
box-shadow: 10px 10px 20px #c4c4c4,
|
|
-10px -10px 20px #ffffff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
padding: 4px;
|
|
}
|
|
|
|
.button {
|
|
background-color: #e4e4e4;
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: inset 5px 5px 5px #c4c4c4,
|
|
inset -5px -5px 5px #ffffff;
|
|
color: #333;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
margin: 3px;
|
|
padding: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.button:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.card .Explore {
|
|
color: #3035cb;
|
|
}
|
|
|
|
.card .Explore:hover {
|
|
background-color: #3035cb;
|
|
color: #e4e4e4;
|
|
}
|
|
|
|
.card .Explore svg {
|
|
fill: #3035cb;
|
|
}
|
|
|
|
.card .Explore:hover svg {
|
|
fill: #e4e4e4;
|
|
}
|
|
|
|
.card .Post {
|
|
color: #333;
|
|
}
|
|
|
|
.card .Post:hover {
|
|
background-color: #333;
|
|
color: #e4e4e4;
|
|
}
|
|
|
|
.card .Post svg {
|
|
fill: #333;
|
|
}
|
|
|
|
.card .Post:hover svg {
|
|
fill: #e4e4e4;
|
|
}
|
|
|
|
.card .Chat {
|
|
color: #b82323;
|
|
}
|
|
|
|
.card .Chat:hover {
|
|
background-color: #b82323;
|
|
color: #e4e4e4;
|
|
}
|
|
|
|
.card .Chat svg {
|
|
fill: #b82323;
|
|
}
|
|
|
|
.card .Chat:hover svg {
|
|
fill: #e4e4e4;
|
|
}
|
|
|
|
</style>
|