A Pen by Curtis Bowman

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

<!DOCTYPE html>
<html >
  <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">


  <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>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

/* 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-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