#21 Neumorphic Search

Preview

HTML

SCSS


*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700;900&display=swap');

body {
  background-color: #ecf0f3;
}

.search-box {
  width: 100%;
  max-width: 350px;
  height: 60px;
  background-color: #ecf0f3;
  padding: 5px;
  box-shadow: 12px 12px 24px 0 rgba(209, 217, 230, 1), -12px -12px 24px 0 rgba(255, 255, 255, 1);
  border-radius: 100px;
  overflow: hidden;
  position: relative;

  input[type=text] {
    width: 100%;
    height: 50px;
    border-radius: 100px;
    border: none;
    background-color: #ecf0f3;
    transition: box-shadow 0.3s ease-in-out;
    font-size: 16px;
    color: #162B39;
    padding: 5px 60px 5px 24px;
    font-family: 'Fira Sans', sans-serif;
    
    &:focus {
      box-shadow: inset 6px 6px 10px 0 rgba(209, 217, 230, 1), inset -6px -6px 10px 0 rgba(255, 255, 255, 1);
      outline: none;
      transition: box-shadow 0.3s ease-in-out;
      
      + {
        .submit {
          svg {
            fill: #162B39;
          }
          
          &:hover {
            svg {
              fill: #627288;
            }
          }
        }
      }
    }
    
    &::-webkit-input-placeholder {
      color: #627288;
    }
    
    &::-moz-placeholder {
      color: #627288;
    }
    
    &:-ms-input-placeholder {
      color: #627288;
    }
    
    &:-moz-placeholder {
      color: #627288;
    }
  }

  .submit {
    position: absolute;
    right: 24px;
    top: 13px;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    
    &:focus {
      outline: none;
      box-shadow: none;
    }
    
    &:hover {
      outline: none;
      box-shadow: none;
    }
    
    svg {
      fill: #9DACBB;
      width: 35px;
      transition: all .3s ease-in-out;
    }
  }
}


Notes

In the code you can replace the images, icons and font. For icons and font you may have to change the size in the css.

Help the Project

Your help is important for the success of this project. We will make this project grow for everyone.