A Pen by Curtis Bowman

Tutorials of (A pen by curtis bowman) by Curtis bowman

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Pen by  Curtis Bowman</title>
  
  
  <link rel='stylesheet prefetch' href='https://daneden.github.io/animate.css/animate.min.css'>

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

  
</head>

<body>
  <div class="page">
  <div class="search-bar">
    <a href="#" class="search-button">Show Search</a>
    <a href="#" class="search-button" style="display: none;"><span class="close">X</span></a>
    <input class="search-box" value="Some Text"></input>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background: #000000;
}

.search-button, .search-box {
  border-radius: .125em;
}

.active {
  display: block !important;
}

.close {
  color: #fff;
  font-size: 2em;
  font-weight: bold;
}

.search-bar {
  background: #191919;
  border-top: 1px solid #343434;
  border-bottom: 1px solid #343434;
  clear: both;
  overflow: hidden;
  padding: 1em;
}

.search-button {
  display: inline-block;
  padding: 10px;
  background: #931100;
  color: #fff;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  float: right;
}
.search-button:hover {
  background: #d2023d;
}

.search-box {
  background: #fff;
  padding: 10px 30px;
  width: 400px;
  color: #cecece;
  text-transform: uppercase;
  font-family: sans-serif;
  display: none;
}
.search-box:focus {
  font-size: 2em;
  color: #181818;
}
/* Downloaded from https://www.codeseek.co/ */
$(".search-button").click(function(){
  $(".search-box").toggleClass("active animated slideInRight");
  $( ".search-button" ).toggle();
});

This awesome code ( A Pen by Curtis Bowman ) is write by Curtis Bowman, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Curtis Bowman