Collection of various types of CSS buttons in various colors

Colorful CSS Buttons and A collection of various types of CSS buttons in various colors. Effects coverd border - open, border, Border Reversed - Open, Border Reversed, Fill Vertical - Open, Fill Vertical, Fill Horizontal - Open, Fill Horizontal. All the effects developed using CSS and HTML. Border, Border Reversed, Fill Vertical and Fill Horizontal are developed with animation effects.

Demo Download

Author Chris Deacy
Hits
Created MAY 04, 2015
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<div class="main-container">
  <h1>Colorful CSS Buttons</h1>
  <section>
    <h2>Border - Open</h2>
    <button class="btn btn-green btn-border-o">Emerald</button>
    <button class="btn btn-blue btn-border-o">Peter River</button>
    <button class="btn btn-purple btn-border-o">Amethyst</button>
    <button class="btn btn-navy btn-border-o">Wet Asphalt</button>
    <button class="btn btn-orange btn-border-o">Carrot</button>
    <button class="btn btn-red btn-border-o">Alizarin</button>
  </section>
  <section>
    <h2>Border</h2>
    <button class="btn btn-green btn-border">Emerald</button>
    <button class="btn btn-blue btn-border">Peter River</button>
    <button class="btn btn-purple btn-border">Amethyst</button>
    <button class="btn btn-navy btn-border">Wet Asphalt</button>
    <button class="btn btn-orange btn-border">Carrot</button>
    <button class="btn btn-red btn-border">Alizarin</button>
  </section>
  <section>
    <h2>Border Reversed - Open</h2>
    <button class="btn btn-green btn-border-rev-o">Emerald</button>
    <button class="btn btn-blue btn-border-rev-o">Peter River</button>
    <button class="btn btn-purple btn-border-rev-o">Amethyst</button>
    <button class="btn btn-navy btn-border-rev-o">Wet Asphalt</button>
    <button class="btn btn-orange btn-border-rev-o">Carrot</button>
    <button class="btn btn-red btn-border-rev-o">Alizarin</button>
  </section>
  <section>
    <h2>Border Reversed</h2>
    <button class="btn btn-green btn-border-rev">Emerald</button>
    <button class="btn btn-blue btn-border-rev">Peter River</button>
    <button class="btn btn-purple btn-border-rev">Amethyst</button>
    <button class="btn btn-navy btn-border-rev">Wet Asphalt</button>
    <button class="btn btn-orange btn-border-rev">Carrot</button>
    <button class="btn btn-red btn-border-rev">Alizarin</button>
  </section>
  <section>
    <h2>Fill Vertical - Open</h2>
    <button class="btn btn-green btn-fill-vert-o">Emerald</button>
    <button class="btn btn-blue btn-fill-vert-o">Peter River</button>
    <button class="btn btn-purple btn-fill-vert-o">Amethyst</button>
    <button class="btn btn-navy btn-fill-vert-o">Wet Asphalt</button>
    <button class="btn btn-orange btn-fill-vert-o">Carrot</button>
    <button class="btn btn-red btn-fill-vert-o">Alizarin</button>
  </section>
  <section>
    <h2>Fill Vertical</h2>
    <button class="btn btn-green btn-fill-vert">Emerald</button>
    <button class="btn btn-blue btn-fill-vert">Peter River</button>
    <button class="btn btn-purple btn-fill-vert">Amethyst</button>
    <button class="btn btn-navy btn-fill-vert">Wet Asphalt</button>
    <button class="btn btn-orange btn-fill-vert">Carrot</button>
    <button class="btn btn-red btn-fill-vert">Alizarin</button>
  </section>
  <section>
    <h2>Fill Horizontal - Open</h2>
    <button class="btn btn-green btn-fill-horz-o">Emerald</button>
    <button class="btn btn-blue btn-fill-horz-o">Peter River</button>
    <button class="btn btn-purple btn-fill-horz-o">Amethyst</button>
    <button class="btn btn-navy btn-fill-horz-o">Wet Asphalt</button>
    <button class="btn btn-orange btn-fill-horz-o">Carrot</button>
    <button class="btn btn-red btn-fill-horz-o">Alizarin</button>
  </section>
  <section>
    <h2>Fill Horizontal</h2>
    <button class="btn btn-green btn-fill-horz">Emerald</button>
    <button class="btn btn-blue btn-fill-horz">Peter River</button>
    <button class="btn btn-purple btn-fill-horz">Amethyst</button>
    <button class="btn btn-navy btn-fill-horz">Wet Asphalt</button>
    <button class="btn btn-orange btn-fill-horz">Carrot</button>
    <button class="btn btn-red btn-fill-horz">Alizarin</button>
  </section>
</div>

CSS Code

/* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
.animate, .btn, .btn-border-o:before, .btn-border-o:after, .btn-border:before, .btn-border:after, .btn-border-rev-o:before, .btn-border-rev-o:after, .btn-border-rev:before, .btn-border-rev:after, .btn-fill-vert-o:before, .btn-fill-vert-o:after, .btn-fill-vert:before, .btn-fill-vert:after, .btn-fill-horz-o:before, .btn-fill-horz-o:after, .btn-fill-horz:before, .btn-fill-horz:after {
  transition: all 0.3s;
}

/* Main Styles */
.main-container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0 15px;
}

h1 {
  line-height: 1;
  padding: 25px 0;
  border-bottom: 1px solid #2c3e50;
  font-size: 35px;
  color: #2c3e50;
  text-align: center;
}

section {
  padding: 60px 0 61px;
  text-align: center;
  position: relative;
}
section h2 {
  margin-bottom: 15px;
  font-weight: normal;
  font-size: 17px;
  color: #D2D2D2;
  text-align: center;
}
section:not(:last-child):after {
  content: '';
  width: 70%;
  height: 1px;
  border-bottom: 1px dashed #2c3e50;
  opacity: .5;
  position: absolute;
  bottom: -1px;
  left: 15%;
}

.btn {
  display: inline-block;
  line-height: 35px;
  margin: 8px;
  padding: 0 15px;
  font-size: 15px;
  position: relative;
  opacity: .999;
  border-radius: 3px;
}

.btn-border-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #B8B8B8;
}
.btn-border-o:before, .btn-border-o:after {
  content: '';
  border-style: solid;
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  box-sizing: content-box;
}
.btn-border-o:before {
  width: 0;
  height: 100%;
  border-width: 1px 0 1px 0;
  top: -1px;
  left: 0;
  transition-delay: 0.05s;
}
.btn-border-o:after {
  width: 100%;
  height: 0;
  border-width: 0 1px 0 1px;
  top: 0;
  left: -1px;
}
.btn-border-o:hover:before {
  width: 100%;
}
.btn-border-o:hover:after {
  height: 100%;
}
.btn-border-o.btn-green:before, .btn-border-o.btn-green:after {
  border-color: #2ecc71;
}
.btn-border-o.btn-green:hover {
  color: #2ecc71;
}
.btn-border-o.btn-blue:before, .btn-border-o.btn-blue:after {
  border-color: #3498db;
}
.btn-border-o.btn-blue:hover {
  color: #3498db;
}
.btn-border-o.btn-purple:before, .btn-border-o.btn-purple:after {
  border-color: #9b59b6;
}
.btn-border-o.btn-purple:hover {
  color: #9b59b6;
}
.btn-border-o.btn-navy:before, .btn-border-o.btn-navy:after {
  border-color: #34495e;
}
.btn-border-o.btn-navy:hover {
  color: #34495e;
}
.btn-border-o.btn-orange:before, .btn-border-o.btn-orange:after {
  border-color: #e67e22;
}
.btn-border-o.btn-orange:hover {
  color: #e67e22;
}
.btn-border-o.btn-red:before, .btn-border-o.btn-red:after {
  border-color: #e74c3c;
}
.btn-border-o.btn-red:hover {
  color: #e74c3c;
}

.btn-border {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #a6a6a6;
}
.btn-border:before, .btn-border:after {
  content: '';
  border-style: solid;
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  box-sizing: content-box;
}
.btn-border:before {
  width: 0;
  height: 100%;
  border-width: 1px 0 1px 0;
  top: -1px;
  left: 0;
  transition-delay: 0.05s;
}
.btn-border:after {
  width: 100%;
  height: 0;
  border-width: 0 1px 0 1px;
  top: 0;
  left: -1px;
}
.btn-border:hover {
  background-color: transparent;
}
.btn-border:hover:before {
  width: 100%;
}
.btn-border:hover:after {
  height: 100%;
}
.btn-border.btn-green:before, .btn-border.btn-green:after {
  border-color: #2ecc71;
}
.btn-border.btn-green:hover {
  color: #2ecc71;
}
.btn-border.btn-blue:before, .btn-border.btn-blue:after {
  border-color: #3498db;
}
.btn-border.btn-blue:hover {
  color: #3498db;
}
.btn-border.btn-purple:before, .btn-border.btn-purple:after {
  border-color: #9b59b6;
}
.btn-border.btn-purple:hover {
  color: #9b59b6;
}
.btn-border.btn-navy:before, .btn-border.btn-navy:after {
  border-color: #34495e;
}
.btn-border.btn-navy:hover {
  color: #34495e;
}
.btn-border.btn-orange:before, .btn-border.btn-orange:after {
  border-color: #e67e22;
}
.btn-border.btn-orange:hover {
  color: #e67e22;
}
.btn-border.btn-red:before, .btn-border.btn-red:after {
  border-color: #e74c3c;
}
.btn-border.btn-red:hover {
  color: #e74c3c;
}

.btn-border-rev-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #B8B8B8;
}
.btn-border-rev-o:before, .btn-border-rev-o:after {
  content: '';
  border-style: solid;
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  box-sizing: content-box;
}
.btn-border-rev-o:before {
  width: 0;
  height: 100%;
  border-width: 1px 0 1px 0;
  top: -1px;
  right: 0;
  transition-delay: 0.05s;
}
.btn-border-rev-o:after {
  width: 100%;
  height: 0;
  border-width: 0 1px 0 1px;
  bottom: 0;
  left: -1px;
}
.btn-border-rev-o:hover:before {
  width: 100%;
}
.btn-border-rev-o:hover:after {
  height: 100%;
}
.btn-border-rev-o.btn-green:before, .btn-border-rev-o.btn-green:after {
  border-color: #2ecc71;
}
.btn-border-rev-o.btn-green:hover {
  color: #2ecc71;
}
.btn-border-rev-o.btn-blue:before, .btn-border-rev-o.btn-blue:after {
  border-color: #3498db;
}
.btn-border-rev-o.btn-blue:hover {
  color: #3498db;
}
.btn-border-rev-o.btn-purple:before, .btn-border-rev-o.btn-purple:after {
  border-color: #9b59b6;
}
.btn-border-rev-o.btn-purple:hover {
  color: #9b59b6;
}
.btn-border-rev-o.btn-navy:before, .btn-border-rev-o.btn-navy:after {
  border-color: #34495e;
}
.btn-border-rev-o.btn-navy:hover {
  color: #34495e;
}
.btn-border-rev-o.btn-orange:before, .btn-border-rev-o.btn-orange:after {
  border-color: #e67e22;
}
.btn-border-rev-o.btn-orange:hover {
  color: #e67e22;
}
.btn-border-rev-o.btn-red:before, .btn-border-rev-o.btn-red:after {
  border-color: #e74c3c;
}
.btn-border-rev-o.btn-red:hover {
  color: #e74c3c;
}

.btn-border-rev {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #a6a6a6;
}
.btn-border-rev:before, .btn-border-rev:after {
  content: '';
  border-style: solid;
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  box-sizing: content-box;
}
.btn-border-rev:before {
  width: 0;
  height: 100%;
  border-width: 1px 0 1px 0;
  top: -1px;
  right: 0;
}
.btn-border-rev:after {
  width: 100%;
  height: 0;
  border-width: 0 1px 0 1px;
  bottom: 0;
  left: -1px;
  transition-delay: 0.05s;
}
.btn-border-rev:hover {
  background-color: transparent;
}
.btn-border-rev:hover:before {
  width: 100%;
}
.btn-border-rev:hover:after {
  height: 100%;
}
.btn-border-rev.btn-green:before, .btn-border-rev.btn-green:after {
  border-color: #2ecc71;
}
.btn-border-rev.btn-green:hover {
  color: #2ecc71;
}
.btn-border-rev.btn-blue:before, .btn-border-rev.btn-blue:after {
  border-color: #3498db;
}
.btn-border-rev.btn-blue:hover {
  color: #3498db;
}
.btn-border-rev.btn-purple:before, .btn-border-rev.btn-purple:after {
  border-color: #9b59b6;
}
.btn-border-rev.btn-purple:hover {
  color: #9b59b6;
}
.btn-border-rev.btn-navy:before, .btn-border-rev.btn-navy:after {
  border-color: #34495e;
}
.btn-border-rev.btn-navy:hover {
  color: #34495e;
}
.btn-border-rev.btn-orange:before, .btn-border-rev.btn-orange:after {
  border-color: #e67e22;
}
.btn-border-rev.btn-orange:hover {
  color: #e67e22;
}
.btn-border-rev.btn-red:before, .btn-border-rev.btn-red:after {
  border-color: #e74c3c;
}
.btn-border-rev.btn-red:hover {
  color: #e74c3c;
}

.btn-fill-vert-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #B8B8B8;
  overflow: hidden;
}
.btn-fill-vert-o:before, .btn-fill-vert-o:after {
  content: '';
  width: 100%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: -1;
}
.btn-fill-vert-o:before {
  top: 50%;
}
.btn-fill-vert-o:after {
  bottom: 50%;
}
.btn-fill-vert-o:hover {
  color: #fff;
}
.btn-fill-vert-o:hover:before, .btn-fill-vert-o:hover:after {
  height: 50%;
  opacity: 1;
}
.btn-fill-vert-o.btn-green:before, .btn-fill-vert-o.btn-green:after {
  background-color: #2ecc71;
}
.btn-fill-vert-o.btn-green:hover {
  border-color: #2ecc71;
}
.btn-fill-vert-o.btn-blue:before, .btn-fill-vert-o.btn-blue:after {
  background-color: #3498db;
}
.btn-fill-vert-o.btn-blue:hover {
  border-color: #3498db;
}
.btn-fill-vert-o.btn-purple:before, .btn-fill-vert-o.btn-purple:after {
  background-color: #9b59b6;
}
.btn-fill-vert-o.btn-purple:hover {
  border-color: #9b59b6;
}
.btn-fill-vert-o.btn-navy:before, .btn-fill-vert-o.btn-navy:after {
  background-color: #34495e;
}
.btn-fill-vert-o.btn-navy:hover {
  border-color: #34495e;
}
.btn-fill-vert-o.btn-orange:before, .btn-fill-vert-o.btn-orange:after {
  background-color: #e67e22;
}
.btn-fill-vert-o.btn-orange:hover {
  border-color: #e67e22;
}
.btn-fill-vert-o.btn-red:before, .btn-fill-vert-o.btn-red:after {
  background-color: #e74c3c;
}
.btn-fill-vert-o.btn-red:hover {
  border-color: #e74c3c;
}

.btn-fill-vert {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #a6a6a6;
  overflow: hidden;
}
.btn-fill-vert:before, .btn-fill-vert:after {
  content: '';
  width: 100%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: -1;
}
.btn-fill-vert:before {
  top: 50%;
}
.btn-fill-vert:after {
  bottom: 50%;
}
.btn-fill-vert:hover {
  color: #fff;
}
.btn-fill-vert:hover:before, .btn-fill-vert:hover:after {
  height: 50%;
  opacity: 1;
}
.btn-fill-vert.btn-green:before, .btn-fill-vert.btn-green:after {
  background-color: #2ecc71;
}
.btn-fill-vert.btn-green:hover {
  border-color: #2ecc71;
}
.btn-fill-vert.btn-blue:before, .btn-fill-vert.btn-blue:after {
  background-color: #3498db;
}
.btn-fill-vert.btn-blue:hover {
  border-color: #3498db;
}
.btn-fill-vert.btn-purple:before, .btn-fill-vert.btn-purple:after {
  background-color: #9b59b6;
}
.btn-fill-vert.btn-purple:hover {
  border-color: #9b59b6;
}
.btn-fill-vert.btn-navy:before, .btn-fill-vert.btn-navy:after {
  background-color: #34495e;
}
.btn-fill-vert.btn-navy:hover {
  border-color: #34495e;
}
.btn-fill-vert.btn-orange:before, .btn-fill-vert.btn-orange:after {
  background-color: #e67e22;
}
.btn-fill-vert.btn-orange:hover {
  border-color: #e67e22;
}
.btn-fill-vert.btn-red:before, .btn-fill-vert.btn-red:after {
  background-color: #e74c3c;
}
.btn-fill-vert.btn-red:hover {
  border-color: #e74c3c;
}

.btn-fill-horz-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #B8B8B8;
  overflow: hidden;
}
.btn-fill-horz-o:before, .btn-fill-horz-o:after {
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}
.btn-fill-horz-o:before {
  left: 50%;
}
.btn-fill-horz-o:after {
  right: 50%;
}
.btn-fill-horz-o:hover {
  color: #fff;
}
.btn-fill-horz-o:hover:before, .btn-fill-horz-o:hover:after {
  width: 50%;
  opacity: 1;
}
.btn-fill-horz-o.btn-green:before, .btn-fill-horz-o.btn-green:after {
  background-color: #2ecc71;
}
.btn-fill-horz-o.btn-green:hover {
  border-color: #2ecc71;
}
.btn-fill-horz-o.btn-blue:before, .btn-fill-horz-o.btn-blue:after {
  background-color: #3498db;
}
.btn-fill-horz-o.btn-blue:hover {
  border-color: #3498db;
}
.btn-fill-horz-o.btn-purple:before, .btn-fill-horz-o.btn-purple:after {
  background-color: #9b59b6;
}
.btn-fill-horz-o.btn-purple:hover {
  border-color: #9b59b6;
}
.btn-fill-horz-o.btn-navy:before, .btn-fill-horz-o.btn-navy:after {
  background-color: #34495e;
}
.btn-fill-horz-o.btn-navy:hover {
  border-color: #34495e;
}
.btn-fill-horz-o.btn-orange:before, .btn-fill-horz-o.btn-orange:after {
  background-color: #e67e22;
}
.btn-fill-horz-o.btn-orange:hover {
  border-color: #e67e22;
}
.btn-fill-horz-o.btn-red:before, .btn-fill-horz-o.btn-red:after {
  background-color: #e74c3c;
}
.btn-fill-horz-o.btn-red:hover {
  border-color: #e74c3c;
}

.btn-fill-horz {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #a6a6a6;
  overflow: hidden;
}
.btn-fill-horz:before, .btn-fill-horz:after {
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}
.btn-fill-horz:before {
  left: 50%;
}
.btn-fill-horz:after {
  right: 50%;
}
.btn-fill-horz:hover {
  color: #fff;
}
.btn-fill-horz:hover:before, .btn-fill-horz:hover:after {
  width: 50%;
  opacity: 1;
}
.btn-fill-horz.btn-green:before, .btn-fill-horz.btn-green:after {
  background-color: #2ecc71;
}
.btn-fill-horz.btn-green:hover {
  border-color: #2ecc71;
}
.btn-fill-horz.btn-blue:before, .btn-fill-horz.btn-blue:after {
  background-color: #3498db;
}
.btn-fill-horz.btn-blue:hover {
  border-color: #3498db;
}
.btn-fill-horz.btn-purple:before, .btn-fill-horz.btn-purple:after {
  background-color: #9b59b6;
}
.btn-fill-horz.btn-purple:hover {
  border-color: #9b59b6;
}
.btn-fill-horz.btn-navy:before, .btn-fill-horz.btn-navy:after {
  background-color: #34495e;
}
.btn-fill-horz.btn-navy:hover {
  border-color: #34495e;
}
.btn-fill-horz.btn-orange:before, .btn-fill-horz.btn-orange:after {
  background-color: #e67e22;
}
.btn-fill-horz.btn-orange:hover {
  border-color: #e67e22;
}
.btn-fill-horz.btn-red:before, .btn-fill-horz.btn-red:after {
  background-color: #e74c3c;
}
.btn-fill-horz.btn-red:hover {
  border-color: #e74c3c;
}

Preview

Collection of various types of CSS buttons in various colors preview

Advertisement

Google Matched Content...