Button by andrew-demchenk0

Made by

@andrew-demchenk0

Theme:

Light

#button

#e8e8e8

125 views

CSSAdd prefixes

1button {
2  position: relative;
3  width: 130px;
4  height: 35px;
5  border-radius: 30px;
6  background-color: white;
7  border: 1px #00acee solid;
8  overflow: hidden;
9}
10
11.text1 {
12  font-size: 17px;
13  font-weight: 700;
14  margin-left: 22%;
15}
16
17.text2 {
18  position: absolute;
19  top: 25%;
20  left: -50px;
21  font-weight: 700;
22  font-size: 14px;
23  color: white;
24}
25
26.icon {
27  position: absolute;
28  top: 0;
29  left: 0;
30  transition: transform 0.5s;
31}
32
33.icon::before {
34  position: absolute;
35  left: -100px;
36  top: 0;
37  z-index: -1;
38  content: '';
39  width: 130px;
40  height: 33px;
41  border-radius: 30px;
42  background-color: #00acee;
43}
44
45button:hover .icon {
46  transform: translateX(96px);
47  transition: transform 0.5s;
48}
49
50button:hover .text2 {
51  transform: translateX(100px);
52  transition: transform 0.6s;
53}
54
55button:active {
56  transform: scale(1.03);
57}

button {
  position: relative;
  width: 130px;
  height: 35px;
  border-radius: 30px;
  background-color: white;
  border: 1px #00acee solid;
  overflow: hidden;
}

.text1 {
  font-size: 17px;
  font-weight: 700;
  margin-left: 22%;
}

.text2 {
  position: absolute;
  top: 25%;
  left: -50px;
  font-weight: 700;
  font-size: 14px;
  color: white;
}

.icon {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s;
}

.icon::before {
  position: absolute;
  left: -100px;
  top: 0;
  z-index: -1;
  content: '';
  width: 130px;
  height: 33px;
  border-radius: 30px;
  background-color: #00acee;
}

button:hover .icon {
  transform: translateX(96px);
  transition: transform 0.5s;
}

button:hover .text2 {
  transform: translateX(100px);
  transition: transform 0.6s;
}

button:active {
  transform: scale(1.03);
}

HTML

1<button> 
2  <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="33" viewBox="0 0 60 60" height="33"><g fill-rule="evenodd" fill="none"><path fill="#00acee" d="m30 60c16.5685433 0 30-13.4314567 30-30s-13.4314567-30-30-30-30 13.4314567-30 30 13.4314567 30 30 30z"></path><path fill="#fff" d="m41.0521385 18.4366943c-1.2089539-1.3744928-2.9316-2.2502302-4.838077-2.2819633-3.6604615-.0609279-6.6284077 3.0321924-6.6284077 6.908385 0 .5501252.0586385 1.0865774.1717154 1.6015572-5.5087846-.3573206-10.3929-3.2259026-13.6619538-7.5499514-.5705539 1.0361399-.8975077 2.2471609-.8975077 3.5444286 0 2.455838 1.1701846 4.6353768 2.9487231 5.922267-1.0865077-.0479675-2.1085616-.3768796-3.0021923-.9164654-.0006462.029493-.0006462.0589929-.0006462.0890105 0 3.4295872 2.2848 6.3067451 5.3170385 6.9769758-.556177.1575997-1.1417539.240078-1.7462308.2360697-.4271077-.0028322-.8424231-.0501962-1.2470769-.13524.8433923 2.8126097 3.2911846 4.8649983 6.1917692 4.93286-2.2684846 1.8830683-5.1264231 3.0045653-8.232 2.998159-.5350154-.0011037-1.0626-.035675-1.5811385-.1021874 2.933377 2.0127143 6.4174385 3.1845715 10.1606077 3.1855535 12.1917923.0031987 18.8589693-10.6066422 18.8589693-19.8093844 0-.3019324-.0066231-.6022496-.0192231-.9011167 1.2950538-.9649855 2.4187154-2.1748628 3.3073385-3.556433-1.1886.5357972-2.4662077.8916496-3.8068154 1.0409189 1.3683923-.8421727 2.419523-2.1900418 2.9143154-3.8063795-1.2808385.7767339-2.6993077 1.3337545-4.2092077 1.6229359z"></path></g></svg></span>
3  <span class="text1">Follow me</span>
4  <span class="text2">1,2k</span> 
5</button>

<button> 
  <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="33" viewBox="0 0 60 60" height="33"><g fill-rule="evenodd" fill="none"><path fill="#00acee" d="m30 60c16.5685433 0 30-13.4314567 30-30s-13.4314567-30-30-30-30 13.4314567-30 30 13.4314567 30 30 30z"></path><path fill="#fff" d="m41.0521385 18.4366943c-1.2089539-1.3744928-2.9316-2.2502302-4.838077-2.2819633-3.6604615-.0609279-6.6284077 3.0321924-6.6284077 6.908385 0 .5501252.0586385 1.0865774.1717154 1.6015572-5.5087846-.3573206-10.3929-3.2259026-13.6619538-7.5499514-.5705539 1.0361399-.8975077 2.2471609-.8975077 3.5444286 0 2.455838 1.1701846 4.6353768 2.9487231 5.922267-1.0865077-.0479675-2.1085616-.3768796-3.0021923-.9164654-.0006462.029493-.0006462.0589929-.0006462.0890105 0 3.4295872 2.2848 6.3067451 5.3170385 6.9769758-.556177.1575997-1.1417539.240078-1.7462308.2360697-.4271077-.0028322-.8424231-.0501962-1.2470769-.13524.8433923 2.8126097 3.2911846 4.8649983 6.1917692 4.93286-2.2684846 1.8830683-5.1264231 3.0045653-8.232 2.998159-.5350154-.0011037-1.0626-.035675-1.5811385-.1021874 2.933377 2.0127143 6.4174385 3.1845715 10.1606077 3.1855535 12.1917923.0031987 18.8589693-10.6066422 18.8589693-19.8093844 0-.3019324-.0066231-.6022496-.0192231-.9011167 1.2950538-.9649855 2.4187154-2.1748628 3.3073385-3.556433-1.1886.5357972-2.4662077.8916496-3.8068154 1.0409189 1.3683923-.8421727 2.419523-2.1900418 2.9143154-3.8063795-1.2808385.7767339-2.6993077 1.3337545-4.2092077 1.6229359z"></path></g></svg></span>
  <span class="text1">Follow me</span>
  <span class="text2">1,2k</span> 
</button>