Component - Kodeset

Button

 1 
 2<div class="container">
 3  <button class="Btn instagram">
 4    <svg
 5      class="svgIcon"
 6      viewBox="0 0 448 512"
 7      height="1.5em"
 8      xmlns="http://www.w3.org/2000/svg"
 9    >
10      <path
11        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
12      ></path>
13    </svg>
14    <span class="text">Instagram</span>
15  </button>
16 
17  <button class="Btn youtube">
18    <svg
19      class="svgIcon"
20      viewBox="0 0 576 512"
21      height="1.5em"
22      xmlns="http://www.w3.org/2000/svg"
23    >
24      <path
25        d="M549.655 148.28c-6.281-23.64-24.041-42.396-47.655-48.685C462.923 85 288 85 288 85S113.077 85 74 99.595c-23.614 6.289-41.374 25.045-47.655 48.685-12.614 47.328-12.614 147.717-12.614 147.717s0 100.39 12.614 147.718c6.281 23.64 24.041 42.396 47.655 48.684C113.077 427 288 427 288 427s174.923 0 214-14.595c23.614-6.289 41.374-25.045 47.655-48.685 12.614-47.328 12.614-147.718 12.614-147.718s0-100.389-12.614-147.717zM240 336V176l144 80-144 80z"
26      ></path>
27    </svg>
28    <span class="text">YouTube</span>
29  </button>
30 
31  <button class="Btn twitter">
32    <svg
33      class="svgIcon"
34      viewBox="0 0 512 512"
35      height="1.5em"
36      xmlns="http://www.w3.org/2000/svg"
37    >
38      <path
39        d="M512 97.248c-18.84 8.36-39.082 14.008-60.277 16.54 21.62-12.92 38.212-33.216 46.042-57.45-20.242 12-42.71 20.67-66.61 25.41-19.128-20.412-46.344-33.21-76.51-33.21-58 0-105 47-105 105 0 8.22.926 16.188 2.714 23.914-87.18-4.376-164.66-46.2-216.45-109.97-9.066 15.508-14.254 33.586-14.254 52.836 0 36.37 18.54 68.542 46.844 87.428-17.272-.554-33.52-5.286-47.754-13.158v1.32c0 50.828 36.13 93.15 84.198 102.79-8.826 2.396-18.14 3.686-27.734 3.686-6.78 0-13.34-.664-19.676-1.902 13.36 41.77 52.164 72.198 98.116 73.052-35.96 28.17-81.38 44.99-130.76 44.99-8.54 0-16.94-.5-25.14-1.476 46.684 29.922 101.99 47.31 161.18 47.31 193.32 0 298.924-160.078 298.924-298.926 0-4.554-.106-9.086-.306-13.594 20.546-14.824 38.364-33.298 52.456-54.422z"
40      ></path>
41    </svg>
42    <span class="text">Twitter</span>
43  </button>
44</div>

 1 
 2.container {
 3  display: flex;
 4}
 5 
 6.Btn {
 7  border: none;
 8  border-radius: 50%;
 9  width: 45px;
10  height: 45px;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14  transition-duration: 0.4s;
15  cursor: pointer;
16  position: relative;
17  overflow: hidden;
18  margin-left: 10px;
19}
20 
21.instagram {
22  background: #f09433;
23  background: -moz-linear-gradient(
24    45deg,
25    #f09433 0%,
26    #e6683c 25%,
27    #dc2743 50%,
28    #cc2366 75%,
29    #bc1888 100%
30  );
31  background: -webkit-linear-gradient(
32    45deg,
33    #f09433 0%,
34    #e6683c 25%,
35    #dc2743 50%,
36    #cc2366 75%,
37    #bc1888 100%
38  );
39  background: linear-gradient(
40    45deg,
41    #f09433 0%,
42    #e6683c 25%,
43    #dc2743 50%,
44    #cc2366 75%,
45    #bc1888 100%
46  );
47  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
48}
49 
50.youtube {
51  background-color: #ff0000;
52}
53 
54.twitter {
55  background-color: #1da1f2;
56}
57 
58.Btn:hover {
59  width: 110px;
60  transition-duration: 0.4s;
61  border-radius: 30px;
62}
63 
64.Btn:hover .text {
65  opacity: 1;
66  transition-duration: 0.4s;
67}
68 
69.Btn:hover .svgIcon {
70  opacity: 0;
71  transition-duration: 0.3s;
72}
73 
74.text {
75  position: absolute;
76  color: rgb(255, 255, 255);
77  width: 120px;
78  font-weight: 600;
79  opacity: 0;
80  transition-duration: 0.4s;
81}
82 
83.svgIcon {
84  transition-duration: 0.3s;
85}
86 
87.svgIcon path {
88  fill: white;
89}

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.