Input by boryanakrasteva

Made by

@boryanakrasteva

Theme:

Light

#input#search

#e8e8e8

1.7K views

CSSAdd prefixes

1.input-container {
2  width: 220px;
3  position: relative;
4}
5
6.icon {
7  position: absolute;
8  right: 10px;
9  top: calc(50% + 5px);
10  transform: translateY(calc(-50% - 5px));
11}
12
13.input {
14  width: 100%;
15  height: 40px;
16  padding: 10px;
17  transition: .2s linear;
18  border: 2.5px solid black;
19  font-size: 14px;
20  text-transform: uppercase;
21  letter-spacing: 2px;
22}
23
24.input:focus {
25  outline: none;
26  border: 0.5px solid black;
27  box-shadow: -5px -5px 0px black;
28}
29
30.input-container:hover > .icon {
31  animation: anim 1s linear infinite;
32}
33
34@keyframes anim {
35  0%,
36  100% {
37    transform: translateY(calc(-50% - 5px)) scale(1);
38  }
39
40  50% {
41    transform: translateY(calc(-50% - 5px)) scale(1.1);
42  }
43}

.input-container {
  width: 220px;
  position: relative;
}

.icon {
  position: absolute;
  right: 10px;
  top: calc(50% + 5px);
  transform: translateY(calc(-50% - 5px));
}

.input {
  width: 100%;
  height: 40px;
  padding: 10px;
  transition: .2s linear;
  border: 2.5px solid black;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.input:focus {
  outline: none;
  border: 0.5px solid black;
  box-shadow: -5px -5px 0px black;
}

.input-container:hover > .icon {
  animation: anim 1s linear infinite;
}

@keyframes anim {
  0%,
  100% {
    transform: translateY(calc(-50% - 5px)) scale(1);
  }

  50% {
    transform: translateY(calc(-50% - 5px)) scale(1.1);
  }
}

HTML

1<div class="input-container">
2  <input type="text" name="text" class="input" placeholder="search...">
3  <span class="icon"> 
4    <svg width="19px" height="19px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="1" d="M14 5H20" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M14 8H17" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M22 22L20 20" stroke="#000" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
5  </span>
6</div>

<div class="input-container">
  <input type="text" name="text" class="input" placeholder="search...">
  <span class="icon"> 
    <svg width="19px" height="19px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="1" d="M14 5H20" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M14 8H17" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M22 22L20 20" stroke="#000" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
  </span>
</div>