May 4, 2015

Glowing Buttons

Glowing Buttons

Glowing effect over the button. You can use a text instead of icons too or both. The effect alone brings beauty to the buttons.

HTML

<div class='buttons'>
  <a href='#' title='Facebook'>
    <i class="fa fa-facebook"></i>
  </a>
  <a class='active' href='#' title='Twitter'>
    <i class="fa fa-twitter"></i>
  </a>
  <a href='#' title='Linkedin'>
    <i class="fa fa-linkedin"></i>
  </a>
  <a href='#' title='Title 4'>
    <i class="fa fa-pinterest"></i>
  </a>
</div>

CSS

html {
  display: table;
  width: 100%;
  height: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#862077, #140027);
}

.buttons {
  white-space: nowrap;
  min-height: 33px;
  position: relative;
  width: 205px;
  margin: 0 auto;
}

.buttons a {
  animation: bounceInDown 900ms 200ms ease-in-out both;
  width: 50px;
  height: 33px;
  position: absolute;
  top: 0;
  text-decoration: none;
  padding-top: 9px;
  outline-width: 0px;
  z-index: 990;
  color: #a675b3;
  text-align: center;
  line-height: 26px;
  display: block;
}

.buttons a:not(.active) {
  box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
  background-image: linear-gradient(#3b2751, #271739);
  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47;
}

.buttons a:not(.active):hover,
.buttons a:not(.active):focus {
  transition: color 200ms linear, text-shadow 500ms linear;
  color: #caadd2;
  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c;
}

.buttons a:not(.active):active {
  color: #e4e3ce !important
}

.buttons a.active,
.buttons a:active {
  box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #170c22, 0 2px 1px 0 rgba(121, 65, 135, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2);
  background-image: linear-gradient(#1f132e, #311d47);
  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c;
  color: #e4e3ce;
}

.buttons a.active:before,
.buttons a:active:before {
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 36px;
  top: 1px;
  left: -2px;
  background-image: linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
  box-shadow: -2px 0 6px 0 #5b2369;
}

.buttons a.active:after,
.buttons a:active:after {
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 36px;
  top: 1px;
  right: -2px;
  background-image: linear-gradient(rgba(91, 35, 105, 0), #5b2369 41%, #5b2369 59%, rgba(91, 35, 105, 0));
  box-shadow: 2px 0 6px 0 #5b2369;
}

.buttons a.active {
  z-index: 1000
}

.buttons a:active {
  z-index: 999
}

.buttons a:last-of-type {
  border-radius: 0 7px 7px 0;
}

.buttons a:first-of-type {
  border-radius: 7px 0 0 7px;
  left: 0;
}

.buttons a:nth-of-type(2) {
  left: 51px
}

.buttons a:nth-of-type(3) {
  left: 102px
}

.buttons a:nth-of-type(4) {
  left: 153px
}

.buttons a:nth-of-type(5) {
  left: 204px
}

.buttons a:nth-of-type(6) {
  left: 255px
}

.buttons a:nth-of-type(7) {
  left: 306px
}

.buttons a:nth-of-type(8) {
  left: 357px
}

.buttons a i:before {
  margin-left: 2px;
  font-size: 22px;
}

.buttons a i.icon-bar-chart:before {
  font-size: 20px;
  margin-top: 0px;
}

.buttons a i.icon-sync:before {
  font-size: 20px;
  margin-left: 3px;
  margin-top: 1px;
}

.buttons a i.icon-download:before {
  font-size: 19px;
  margin-top: 1px;
  margin-left: 4px;
}

p {
  position: absolute;
  bottom: 50px;
  left: 13px;
  right: 50px;
  color: #a99bad;
  font-family: Helvetica, sans-serif;
  font-size: 10px;
  margin-top: 250px;
  margin-left: 50px;
}

p > a {
  color: white;
  font-weight: bold;
}

I have added an addition function to the button. If you want to switch the active class when the button is clicked use this script.

jQuery

(function(){

  $("#buttons").delegate("a", "click", function(e) {
    
    var el       = $(this),    
        buttons  = $('.buttons a');
    
    e.preventDefault();
    
    buttons.removeClass('active');
    
    el.addClass('active');
    
  });
  
})();

Attachments:

For the icons i have used font awesome

//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
demo

No comments:

Post a Comment

Popular Posts

Views