mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
46 lines
2 KiB
HTML
46 lines
2 KiB
HTML
<button class="button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="24" width="24">
|
|
<path fill="white" d="M23.15 2.587L18.21 0.210001C17.9308 0.075557 17.6167 0.031246 17.3113 0.083204C17.0058 0.135162 16.724 0.280818 16.505 0.500001L7.04499 9.13L2.92499 6.002C2.73912 5.86101 2.50976 5.78953 2.27669 5.79994C2.04363 5.81035 1.82156 5.902 1.64899 6.059L0.326993 7.261C0.223973 7.35465 0.141644 7.46878 0.0852761 7.59608C0.0289081 7.72339 -0.00025659 7.86106 -0.000350724 8.00028C-0.000444857 8.1395 0.0285336 8.27721 0.0847294 8.40459C0.140925 8.53197 0.2231 8.64621 0.325993 8.74L3.89899 12L0.325993 15.26C0.2231 15.3538 0.140925 15.468 0.0847294 15.5954C0.0285336 15.7228 -0.000444857 15.8605 -0.000350724 15.9997C-0.00025659 16.1389 0.0289081 16.2766 0.0852761 16.4039C0.141644 16.5312 0.223973 16.6454 0.326993 16.739L1.64999 17.94C1.82256 18.097 2.04463 18.1887 2.27769 18.1991C2.51076 18.2095 2.74012 18.138 2.92599 17.997L7.04599 14.869L16.506 23.499C16.7248 23.7182 17.0064 23.8639 17.3117 23.9159C17.6171 23.9679 17.931 23.9235 18.21 23.789L23.152 21.412C23.4062 21.2893 23.6207 21.0973 23.7707 20.8581C23.9207 20.619 24.0002 20.3423 24 20.06V3.939C24 3.65647 23.9203 3.37967 23.7699 3.14048C23.6195 2.90129 23.4046 2.70943 23.15 2.587ZM18.004 17.448L10.826 12L18.004 6.552V17.448Z"></path>
|
|
</svg>
|
|
<p class="text">Click me</p>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by kamehame-ha - Tags: icon, button, vscode, visualstudio */
|
|
.button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
gap: 15px;
|
|
background-color: #007ACC;
|
|
outline: 3px #007ACC solid;
|
|
outline-offset: -3px;
|
|
border-radius: 5px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: 400ms;
|
|
}
|
|
|
|
.button .text {
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 1em;
|
|
transition: 400ms;
|
|
}
|
|
|
|
.button svg path {
|
|
transition: 400ms;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.button:hover .text {
|
|
color: #007ACC;
|
|
}
|
|
|
|
.button:hover svg path {
|
|
fill: #007ACC;
|
|
}
|
|
</style>
|