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

AuthorChris Deacy
CreatedMAY 04, 2015
LicenseOpen
Compatible browsersChrome, 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

Collection of various types of CSS buttons in various colors preview

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *