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

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

` .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