mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
116 lines
4.1 KiB
HTML
116 lines
4.1 KiB
HTML
<div id="button-container">
|
|
<button class="button" id="youtube">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
|
|
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
|
|
</svg>
|
|
</button>
|
|
<button class="button" id="github">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="button" id="dribbble">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="button" id="instagram">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
|
|
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
|
|
</svg>
|
|
</button>
|
|
<button class="button" id="facebook">
|
|
<svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="button" id="share">
|
|
<svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
|
<circle r="3" cy="5" cx="18"></circle>
|
|
<circle r="3" cy="12" cx="6"></circle>
|
|
<circle r="3" cy="19" cx="18"></circle>
|
|
<line y2="17.49" x2="15.42" y1="13.51" x1="8.59"></line>
|
|
<line y2="10.49" x2="8.59" y1="6.51" x1="15.41"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by arshshaikh06 - Source: https://www.behance.net/gallery/117113957/Social-Share-Animation-Daily-UI-010 - Tags: button, hover, hover button, css button, css animation, cool button, button hover effect */
|
|
#button-container {
|
|
position: relative;
|
|
}
|
|
|
|
.button {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
translate: -50% 50%;
|
|
background: #F4F7F5;
|
|
border: none;
|
|
border-radius: 25px;
|
|
height: 50px;
|
|
width: 50px;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: 0.3s ease-in;
|
|
}
|
|
|
|
#share {
|
|
color: #DC0654;
|
|
background: #fbe6ed;
|
|
}
|
|
|
|
#facebook {
|
|
background: linear-gradient(-160deg, #00D2FF, #3A7BD5);
|
|
}
|
|
|
|
#instagram {
|
|
background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);
|
|
}
|
|
|
|
#dribbble {
|
|
background: linear-gradient(-70deg, #D70652, #FF025E);
|
|
}
|
|
|
|
#github {
|
|
background: linear-gradient(-70deg, #171515, #FF025E);
|
|
}
|
|
|
|
#youtube {
|
|
background: #FF0000;
|
|
}
|
|
|
|
#button-container:hover button {
|
|
rotate: 360deg;
|
|
}
|
|
|
|
#button-container:hover #share {
|
|
rotate: 270deg;
|
|
}
|
|
|
|
#button-container:hover > #facebook {
|
|
translate: -300% 50%;
|
|
}
|
|
|
|
#button-container:hover > #instagram {
|
|
translate: -226.78% -126.78%;
|
|
}
|
|
|
|
#button-container:hover > #dribbble {
|
|
translate: -50% -200%;
|
|
}
|
|
|
|
#button-container:hover > #github {
|
|
translate: 126.78% -126.78%;
|
|
}
|
|
|
|
#button-container:hover > #youtube {
|
|
translate: 200% 50%;
|
|
}
|
|
</style>
|