Top
Home Forum Contact About Us Share Login 🌙 Dark


logo2 CSS Web Dropdown And Animation Buttons Properties


css web dropdown and animation buttons properties,Collection of hand-picked free HTML and CSS dropdown button code examples. In the last years, the web has been invaded by the cool dropdown buttons provided by libraries like Bootstrap. Even if these libraries are cool and feature rich, they're also really heavy, and it's a waste to load hundreds of kilobytes if you need to show just one dropdown button. In this article, we'll see some really cool looking responsive dropdown buttons using only a few lines of CSS. You are free to copy, modify and use this code as you wish. All the dropdown buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.

Facebook Tweet1

CSS Web Buttons Basic Dropdown Properties

it is the basic dropdown button model

live demo basic dropdown button

Item I Item II Item III Item IV
Item I Item II Item III Item IV
Item I Item II Item III Item IV
Item I Item II Item III Item IV


<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}

.dropdown-menu {  position: absolute;  top: 100%;  left: 0;  z-index: 1000;  display: none;  float: left;  min-width: 10rem;  padding: 0.5rem 0;  margin: 0.125rem 0 0;  font-size: 1rem;  color: #ffffff;  text-align: left;  list-style: none;  background-color: #18191b;  background-clip: padding-box;  border: 1px solid #2c2e33;  border-radius: 0.25rem; align-items: center !important;}


.dropdown-item {  display: block;  width: 100%;  padding: 0.25rem 1.5rem;  clear: both;  font-weight: 400;  color: #ffffff;  text-align: inherit;  white-space: nowrap;  background-color: transparent;  border: 1px solid #252321; }
.dropdown-item:hover, .dropdown-item:focus {color: #ccc;    text-decoration: none;    background-color: #252321; }  
.dropdown-menu.show {  display: block; }

.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); } 

.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }
 </style>

<button class="button blue" type="button" data-toggle="dropdown" >Blue ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button red" type="button" data-toggle="dropdown" >Red ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button green" type="button" data-toggle="dropdown" >Green ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button orange" type="button" data-toggle="dropdown" >Orange ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<script src="https://www.web-button/pages/css/drop.js"></script>

CSS Web Buttons Outline Dropdown Properties

it is the outline dropdown button model

demo outline dropdown button

Item I Item II Item III Item IV
Item I Item II Item III Item IV
Item I Item II Item III Item IV
Item I Item II Item III Item IV


<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}

.dropdown-menu {  position: absolute;  top: 100%;  left: 0;  z-index: 1000;  display: none;  float: left;  min-width: 10rem;  padding: 0.5rem 0;  margin: 0.125rem 0 0;  font-size: 1rem;  color: #ffffff;  text-align: left;  list-style: none;  background-color: #18191b;  background-clip: padding-box;  border: 1px solid #2c2e33;  border-radius: 0.25rem; align-items: center !important;}


.dropdown-item {  display: block;  width: 100%;  padding: 0.25rem 1.5rem;  clear: both;  font-weight: 400;  color: #ffffff;  text-align: inherit;  white-space: nowrap;  background-color: transparent;  border: 1px solid #252321; }
.dropdown-item:hover, .dropdown-item:focus {color: #ccc;    text-decoration: none;    background-color: #252321; }  
.dropdown-menu.show {  display: block; }

.blue{
  color: #0090e7;
  background-color: transparent;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blue:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 144, 231, 0.5);}
  



  
.green {
  color: #00d25b;
background-color: transparent;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fc424a;
background-color: transparent;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }


 
.orange {
  color: #ffab00;
background-color: transparent;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }




 </style>

<button class="button blue" type="button" data-toggle="dropdown" >Blue ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button red" type="button" data-toggle="dropdown" >Red ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button green" type="button" data-toggle="dropdown" >Green ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button orange" type="button" data-toggle="dropdown" >Orange ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<script src="https://www.web-button.com/pages/css/drop.js"></script>

CSS Web Buttons Size Dropdown Properties

it is the size dropdown button model

live demo size dropdown button

Item I Item II Item III Item IV
Item I Item II Item III Item IV
Item I Item II Item III Item IV


<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}

.dropdown-menu {  position: absolute;  top: 100%;  left: 0;  z-index: 1000;  display: none;  float: left;  min-width: 10rem;  padding: 0.5rem 0;  margin: 0.125rem 0 0;  font-size: 1rem;  color: #ffffff;  text-align: left;  list-style: none;  background-color: #18191b;  background-clip: padding-box;  border: 1px solid #2c2e33;  border-radius: 0.25rem; align-items: center !important;}


.dropdown-item {  display: block;  width: 100%;  padding: 0.25rem 1.5rem;  clear: both;  font-weight: 400;  color: #ffffff;  text-align: inherit;  white-space: nowrap;  background-color: transparent;  border: 1px solid #252321; }
.dropdown-item:hover, .dropdown-item:focus {color: #ccc;    text-decoration: none;    background-color: #252321; }  
.dropdown-menu.show {  display: block; }

.blue{
  background-color: rgba(0, 144, 231, 0.2);
  background-image: none;
  border-color: rgba(0, 144, 231, 0); }
.blue:not(.blue-light) {
    color: #0090e7; }
  .blue:hover{
    color: #ffffff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blue:focus {
   box-shadow: 0 0 0 3px rgba(0, 144, 231, 0.5); } 



  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }



.lg{
  padding: 1rem 2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.1875rem;

 }

.md{
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.1875rem;

 }


.sm{
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.1875rem; 
}

 </style>

<button class="button blue lg" type="button" data-toggle="dropdown" >Blue ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button red md" type="button" data-toggle="dropdown" >Red ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>

<button class="button green sm" type="button" data-toggle="dropdown" >Green ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>



<script src="https://www.web-button.com/pages/css/drop.js"></script>
CSS Web Buttons Icon Dropdown Properties

it is the icon dropdown button model

live demo icon dropdown button

Item I Item II Item III Item IV
          
Item I Item II Item III Item IV
           
Item I Item II Item III Item IV


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.button {
 text-align: center;
border: 1px solid transparent;
width: 50px;
    height: 50px;
    padding: 0; 
border-radius: 4px;
cursor: pointer;}



.dropdown-menu {  position: absolute;  top: 100%;  left: 0;  z-index: 1000;  display: none;  float: left;  min-width: 10rem;  padding: 0.5rem 0;  margin: 0.125rem 0 0;  font-size: 1rem;  color: #ffffff;  text-align: left;  list-style: none;  background-color: #18191b;  background-clip: padding-box;  border: 1px solid #2c2e33;  border-radius: 0.25rem; align-items: center !important;}


.dropdown-item {  display: block;  width: 100%;  padding: 0.25rem 1.5rem;  clear: both;  font-weight: 400;  color: #ffffff;  text-align: inherit;  white-space: nowrap;  background-color: transparent;  border: 1px solid #252321; }
.dropdown-item:hover, .dropdown-item:focus {color: #ccc;    text-decoration: none;    background-color: #252321; }  
.dropdown-menu.show {  display: block; }

.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); } 

.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fc424a;
background-color: transparent;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }



 </style>

<button class="button  blue " type="button" data-toggle="dropdown"><i class="fa fa-check"></i> ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>
          
<button class="button  red " type="button" data-toggle="dropdown"><i class="fa fa-map-signs"></i> ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div>
           
<button class="button  green " type="button" data-toggle="dropdown"><i class="fa fa-link"></i> ▼</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item I</a>
<a class="dropdown-item" href="#">Item II</a>
<a class="dropdown-item" href="#">Item III</a>
<a class="dropdown-item" href="#">Item IV</a></div><p>

<script src="https://www.web-button.com/pages/css/drop.js"></script>
CSS Web Buttons Block Properties

it is the block button model

live demo block button



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.button {
 text-align: center;
border: 1px solid transparent;
padding: 4px 48px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}

.blue{
  background-color: rgba(0, 144, 231, 0.2);
  background-image: none;
  border-color: rgba(0, 144, 231, 0); }
.blue:not(.blue-light) {
    color: #0090e7; }
  .blue:hover{
    color: #ffffff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blue:focus {
   box-shadow: 0 0 0 3px rgba(0, 144, 231, 0.5); } 

.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.purple {
  color: #fff;
  background-color: #8f5fe8;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.lg{
  padding: 1rem 2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.1875rem;

 }

.float-right {
  float: right !important; }

.block
{display: block;
  width: 100%; 
margin-top: 0.5rem; }

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%; }

.trans {
  color: #fc424a;
background-color: transparent;
  border-color: #fc424a; }
  .trans:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .trans:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }
 </style>

<button type="button" class="button blue lg block"><i class="fa fa-recycle"></i> blue</button>
<button type="button" class="button purple lg block">purple</button>
<button type="button" class="button green lg block"><i class="fa fa-signal"></i> green</button>
<button type="button" class="button trans lg block">Red</button>

CSS animation web buttons css

it is the animation button model

live demo 3d animation web buttons



<style>

.net-net1 {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.net-net2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.net-net3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.net-net4 {
  display: block;
  position: relative;
  padding: 12px 27px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(345deg 100% 47%);
  will-change: transform;
  transform: translateY(-4px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
  .net-net4 {
    font-size: 1.25rem;
    padding: 12px 42px;
  }
}

.net-net1:hover {
  filter: brightness(110%);
}

.net-net1:hover .net-net4 {
  transform: translateY(-6px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.net-net1:active .net-net4 {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.net-net1:hover .net-net2 {
  transform: translateY(4px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.net-net1:active .net-net2 {
  transform: translateY(1px);
  transition: transform 34ms;
}

.net-net1:focus:not(:focus-visible) {
  outline: none;
}

 </style>

<button class="net-net1" role="button">
  <span class="net-net2"></span>
  <span class="net-net3"></span>
  <span class="net-net4">
   Click Me
  </span>
</button>

CSS web buttons animation gradient css

it is the animation gradient button model

live demo web buttons animation gradient



<style>

.effect {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.effect:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.effect:active {
    color: #000
}

.effect:active:after {
    background: transparent;
}

.effect:hover:before {
    opacity: 1;
}

.effect:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
 </style>

<button class="effect" type="button">MOUSE HOVER ME, AND CLICK ME!</button>

CSS Web Buttons Animation Gradient Properties

it is the animation gradient button model

live demo animation gradient button



<button id="classic">Classic button</button>
<button id="gradient">Gradient button</button>
<button id="retro">Retro button</button>
<button id="clear">Clear button</button>

<script>
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ButtonGenerator = function () {
  function ButtonGenerator() {
    _classCallCheck(this, ButtonGenerator);

    this.buttonStyle = {};
  }

  _createClass(ButtonGenerator, [{
    key: 'generateClassicStyle',
    value: function generateClassicStyle() {
      this.buttonStyle = {
        border: 'none',
        backgroundColor: '' + this._randomColor(50),
        padding: this._randomInt(12, 19) + 'px ' + this._randomInt(17, 45) + 'px',
        borderRadius: this._randomInt(2, 20) + 'px',
        color: 'white',
        textShadow: '0 0 ' + this._randomInt(16, 22) + 'px rgba(0, 0, 0, .42)'
      };
    }
  }, {
    key: 'generateGradientStyle',
    value: function generateGradientStyle() {
      this.buttonStyle = {
        border: 'none',
        background: 'linear-gradient(' + this._randomColor(30) + ', ' + this._randomColor(60) + ')',
        padding: this._randomInt(12, 19) + 'px ' + this._randomInt(17, 45) + 'px',
        borderRadius: this._randomInt(5, 35) + 'px',
        color: 'white',
        textShadow: '0 0 ' + this._randomInt(16, 22) + 'px rgba(0, 0, 0, .42)'
      };
    }
  }, {
    key: 'generateRetroStyle',
    value: function generateRetroStyle() {
      this.buttonStyle = {
        border: '1px solid black',
        background: 'linear-gradient(' + this._randomColor(30) + ', ' + this._randomColor(0) + ')',
        padding: this._randomInt(6, 9) + 'px ' + this._randomInt(7, 23) + 'px',
        borderRadius: this._randomInt(6, 12) + 'px',
        color: 'black',
        textShadow: '0 0 ' + this._randomInt(16, 22) + 'px rgba(0, 0, 0, .68)',
        boxShadow: '0 0 ' + this._randomInt(6, 12) + 'px rgba(0, 0, 0, .38)'
      };
    }
  }, {
    key: 'generateClearStyle',
    value: function generateClearStyle() {
      var borderColor = '' + this._randomColor(5);
      this.buttonStyle = {
        border: '2px solid ' + borderColor,
        background: 'transparent',
        padding: this._randomInt(12, 19) + 'px ' + this._randomInt(17, 45) + 'px',
        borderRadius: this._randomInt(2, 20) + 'px',
        color: borderColor,
        textShadow: '0 0 ' + this._randomInt(18, 27) + 'px rgba(0, 0, 0, .32)'
      };
    }
  }, {
    key: 'applyStyleOnButton',
    value: function applyStyleOnButton(button) {
      Object.assign(button.style, this.buttonStyle);
    }
  }, {
    key: '_randomColor',
    value: function _randomColor(brightnessPercentage) {
      var brightness = Math.round(brightnessPercentage * (255 / 100));
      var red = this._randomInt(brightness, 255);
      var green = this._randomInt(brightness, 255);
      var blue = this._randomInt(brightness, 255);

      return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
    }
  }, {
    key: '_getTextColorBasedOnBackground',
    value: function _getTextColorBasedOnBackground(bgColor) {
      var red = bgColor.r * 255;
      var green = bgColor.g * 255;
      var blue = bgColor.b * 255;
      var yiq = (red * 299 + green * 587 + blue * 114) / 1000;
      return yiq >= 128 ? 'black' : 'white';
    }
  }, {
    key: '_randomInt',
    value: function _randomInt(from, to) {
      return Math.round(Math.random() * (to - from) + from);
    }
  }, {
    key: '_chances',
    value: function _chances(percentage) {
      return Math.round(Math.random() * 100) <= percentage;
    }
  }]);

  return ButtonGenerator;
}();


'use strict';

var classic = document.getElementById('classic');
var gradient = document.getElementById('gradient');
var retro = document.getElementById('retro');
var clear = document.getElementById('clear');
var generator = new ButtonGenerator();

classic.onclick = function () {
  generator.generateClassicStyle();
  generator.applyStyleOnButton(classic);
};

gradient.onclick = function () {
  generator.generateGradientStyle();
  generator.applyStyleOnButton(gradient);
};

retro.onclick = function () {
  generator.generateRetroStyle();
  generator.applyStyleOnButton(retro);
};

clear.onclick = function () {
  generator.generateClearStyle();
  generator.applyStyleOnButton(clear);
};

generator.generateClassicStyle();
generator.applyStyleOnButton(classic);

generator.generateGradientStyle();
generator.applyStyleOnButton(gradient);

generator.generateRetroStyle();
generator.applyStyleOnButton(retro);

generator.generateClearStyle();
generator.applyStyleOnButton(clear);
</script>

If you’d like to send us feedback, or have any other question, please fill out the form below and we will get back to you as soon as possible.


×
QUICK MENU
Basic Buttons Basic Dropdown Buttons Outline Buttons Outline Dropdown Buttons Inverse Buttons Size Buttons Size Dropdown Buttons Rounded Buttons Icon Buttons Icon Dropdown Buttons Social Buttons Social Icons Buttons Text And Icon Buttons animation Buttons animation gradient Buttons Gradient Buttons Block Buttons