Skel UI Kit

In this example below you will see how to do a Skel UI Kit with some HTML / CSS and Javascript

Button uses only :active and the element itself to make the illusion of a 3D button press.

Thumbnail
This awesome code was written by tompud, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tompud ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Skel UI Kit</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="skelKit">Skel UI Kit</div>
<div class="container">
  <div class="center">
    <div class="button-container">
      <a class="button-square" href="#">Square</a>
      <a class="button-medium" href="#">Medium</a>
    </div>
    <div class="button-container">
      <a class="button-normal" href="#">Normal</a>
    </div>
    <form class="searchBarContainer">
      <input class="searchBar" type="text" placeholder="search...">
      <button class="searchButton" type="submit" />
    </form>
  </div>
  <div class="center">
    <input class="usernameBox" type="username" placeholder="username">
    <input class="passwordBox" type="password" placeholder="password">
    <input id="rememberMe" class="rememberMe" type="checkbox">
    <br>
    <label for="rememberMe" class="remLabel">remember me</label>
    <div class="button-container">
      <a class="button-small" href="#">LOGIN</a>
    </div>
  </div>
  
</div>
<div class="madeBy">made by: tompud</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tompud/skel-ui-kit-bERYRv */
body {
  background: #171517;
  font-family: "Open Sans";
  font-weight: 100;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.skelKit {
  text-align: center;
  color: #fff;
  margin-top: 30px;
  font-size: 40px;
}

.container {
  margin-top: 50px;
  width: 100%;
  text-align: center;
}

.searchBarContainer {
  margin-top: 20px;
}

.center {
  display: inline-block;
  vertical-align: top;
  margin: 0 20px;
}

.madeBy {
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
  color: #fff;
  font-family: Helvetica;
  font-size: 9px;
  letter-spacing: 2px;
}

.button-container {
  height: 67px;
  margin-top: 10px
}

.button-normal {
  text-decoration: none;
  color: #fff;
  text-align: center;
  line-height: 60px;
  top: 0px;
  position: relative;
  display: inline-block;
  width: 210px;
  height: 60px;
  transition:  .1s;
  border: 1px #fff solid;
  border-bottom: 5px #fff solid;
  border-radius: 3px;
}

.button-normal:active {
  top: 5px;
  border-bottom: 1px #fff solid;
}

.button-square {
  text-decoration: none;
  color: #fff;
  text-align: center;
  line-height: 60px;
  margin-right: 6px;
  top: 0px;
  position: relative;
  display: inline-block;
  width: 65px;
  height: 60px;
  transition:  .1s;
  border: 1px #fff solid;
  border-bottom: 5px #fff solid;
  border-radius: 3px;
}

.button-square:active {
  top: 5px;
  border-bottom: 1px #fff solid;
}

.button-medium {
  text-decoration: none;
  color: #fff;
  text-align: center;
  line-height: 60px;
  top: 0px;
  position: relative;
  margin-bottom: 10px;
  display: inline-block;
  width: 130px;
  height: 60px;
  transition:  .1s;
  border: 1px #fff solid;
  border-bottom: 5px #fff solid;
  border-radius: 3px;
}

.button-medium:active {
  top: 5px;
  border-bottom: 1px #fff solid;
}

.searchBar {
  vertical-align: middle;
  font-family: "Open Sans";
  font-weight: 100;
  display: inline-block;
  color: #fff;
  height: 30px;
  width: 175px;
  line-height: 30px;
  font-size: 16px;
  background: transparent;
  border: 1px #fff solid;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 0;
  padding-left: 5px;
  padding-right: 5px;
  outline: none;
}

.searchButton {
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  height: 30px;
  width: 30px;
  border: 1px #fff solid;
  color: #fff;
  background: transparent url("https://i.imgur.com/BeTLjKL.png") no-repeat;
  background-position: center; 
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.usernameBox {
  display: block;
  margin-top: 10px;
  vertical-align: middle;
  font-family: "Open Sans";
  font-weight: 100;
  color: #fff;
  height: 30px;
  width: 210px;
  line-height: 30px;
  font-size: 16px;
  background: transparent;
  border: 1px #fff solid;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 0;
  padding-left: 5px;
  padding-right: 5px;
  outline: none;
}

.passwordBox {
  display: block;
  margin-top: 5px;
  vertical-align: middle;
  font-family: "Open Sans";
  font-weight: 100;
  color: #fff;
  height: 30px;
  width: 210px;
  line-height: 30px;
  font-size: 16px;
  background: transparent;
  border: 1px #fff solid;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 0;
  padding-left: 5px;
  padding-right: 5px;
  outline: none;
}

.button-small {
  text-decoration: none;
  color: #fff;
  text-align: center;
  line-height: 25px;
  margin-top: 13px;
  top: 0px;
  position: relative;
  display: inline-block;
  width: 210px;
  height: 25px;
  transition:  .1s;
  border: 1px #fff solid;
  border-bottom: 5px #fff solid;
  border-radius: 3px;
}

.button-small:active {
  top: 5px;
  border-bottom: 1px #fff solid;
}

.rememberMe {
  display: inline-block;
  position: relative;
  -webkit-appearance: none;
  outline: none;
  margin: 0;
  margin-top: 12px;
  border: 1px #fff solid;
  padding: 10px;
  border-radius: 3px;
  float: left;
  cursor: pointer;
}

.rememberMe:checked {
  background: url(https://i.imgur.com/gs9mJjc.png) no-repeat;
  background-position: center; 
  
}

.remLabel {
  margin-top: -2px;
  padding-left: 10px;
  float: left;
  display: inline-block;
  color: #B3B3B3;
  cursor: pointer;
}

/*Downloaded from https://www.codeseek.co/tompud/skel-ui-kit-bERYRv */
// No JS :)

Comments