Bricks 5 Button Styles - Turhan Gülveren

StyleS

bricks Button Styles

<style>
/*============{{ALL BUTTON}}============*/
.ba-button-style-1.brxe-button:before{
	text-align: center }
.ba-button-style-1.brxe-button{
  	position: relative;
	display: inline-block;
	border: none;
  	overflow: hidden!important;
	transition: all .3s linear;
  	z-index: 1!important;}
.ba-button-style-1.brxe-button:hover {
	color: #fff;}
.ba-button-style-1.brxe-button:before{
	position: absolute;
	left: 0;
	margin-left: 0;
	top: 0;
	opacity: 1;
	display: block;
	visibility: visible!important;
	height: 100%;
	width: 100%;
	content: "";
	z-index: -1;
	background-color: #1d2230;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
	-webkit-transition: transform .5s cubic-bezier(.86, 0, .070, 1);
	-moz-transition: transform .5s cubic-bezier(.86, 0, .070, 1);
	-o-transition: transform .5s cubic-bezier(.86, 0, .070, 1);
	transition: transform .5s cubic-bezier(.86, 0, .070, 1);
	transition-timing-function: cubic-bezier(.86, 0, .07, 1);
	-webkit-transition-timing-function: cubic-bezier(.86, 0, .070, 1);
	-moz-transition-timing-function: cubic-bezier(.86, 0, .070, 1);
	-o-transition-timing-function: cubic-bezier(.86, 0, .070, 1);
	transition-timing-function: cubic-bezier(.86, 0, .070, 1)}

.ba-button-style-1.brxe-button:hover:before{
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	transform-origin: bottom left}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  




</style>

<style>
/*============{{ALL BUTTON}}============*/

.ba-button-style-2.brxe-button:before{
	text-align: center }
.ba-button-style-2.brxe-button{
  	position: relative;
	display: inline-block;
	border: none;
  	overflow: hidden!important;
	transition: all .3s linear;
  	z-index: 1!important;}
.ba-button-style-2.brxe-button:hover {

}
.ba-button-style-2.brxe-button:before {
    content: "";
    width: 52%;
    height: 100%;
    background: #1d2230;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transform: rotate3d(-1,1,0,
100deg);
    transform-origin: 0 0;
    display: block;
    margin-left: 0!important;
    transition: all 0.3s ease 0s;
}
.ba-button-style-2.brxe-button:after {
    content: "";
    width: 52%;
    height: 100%;
    background: #1d2230;
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: 100% 100%;
    opacity: 0;
    z-index: -1;
    transform: rotate3d(-1,1,0,
100deg);
    display: block;
    margin-left: 0!important;
    transition: all 0.3s ease 0s;
}
  
.ba-button-style-2.brxe-button:hover:after {
    transform-origin: 100% 100%;
    opacity: 1;
    z-index: -1;
    transform: rotate3d(100,100,100,
0deg);
    transition: all 0.3s ease 0s;
}
.ba-button-style-2.brxe-button:hover:before {
    opacity: 1;
    z-index: -1;
    transform: rotate3d(100,100,100,0deg);
    transform-origin: 0 0;
    display: block;
    margin-left: 0!important;
    transition: all 0.3s ease 0s;
}



</style>

<style>
/*============{{ALL BUTTON}}============*/

.ba-button-style-3.brxe-button:before{
	text-align: center }
.ba-button-style-3.brxe-button{
  	position: relative;
	display: inline-block;
	border: none;
  	overflow: hidden!important;
	transition: all .3s linear;
  	z-index: 1!important;}

.ba-button-style-3.brxe-button:after{
  display: none
  }
.ba-button-style-3.brxe-button:before{
   content:"" !important;
   display:block !important;
   visibility:visible !important;
   position:absolute;
   left:auto;
   right:0;
   top:50%;
   height:0;
   width:0;
   background-color:#1d2230;
   z-index:-1;
   -webkit-transform:translateY(-50%);
   -ms-transform:translateY(-50%);
   transform:translateY(-50%);
   border-radius:inherit;-webkit-transition:all ease 0.4s;
   transition:all ease 0.4s;
   opacity:1 !important;
  }
.ba-button-style-3.brxe-button:hover:before{
   width:calc(100% + 1px);
   height:calc(100% + 1px);
   right:auto;left:0px;}
.ba-button-style-3.brxe-button:hover:after{
   background-color:#1d2230;
   color:#000;}




</style>

<style>
/*============{{ALL BUTTON}}============*/



/*** Material-style button click effect ***/
a.ba-button-style-4 {
    overflow: hidden;
}
.ink {
    display: block;
    position: absolute;
    background:rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
}
.animate {
    -webkit-animation:ripple 0.65s linear;
    animation:ripple 0.65s linear;
}
@-webkit-keyframes ripple {
    100% {
        opacity: 0; 
        -webkit-transform: scale(2.5);
    }
}
@keyframes ripple {
    100% {
        opacity: 0; 
        -webkit-transform: scale(2.5); 
        transform: scale(2.5);
    }
}
/*** END Material-style button click effect ***/



</style>


<script type="text/javascript">
(function($) {

/*** Material-style button click effect ***/
    $(function(){
        var ink, d, x, y;
        
        $("a.ba-button-style-4").click(function(e){
            
            if($(this).find(".ink").length === 0){
                $(this).prepend("<span class='ink'></span>");
            }

            ink = $(this).find(".ink");
            ink.removeClass("animate");

            if(!ink.height() && !ink.width()){
                d = Math.max($(this).outerWidth(), $(this).outerHeight());
                ink.css({height: d, width: d});
            }

            x = e.pageX - $(this).offset().left - ink.width()/2;
            y = e.pageY - $(this).offset().top - ink.height()/2;

            ink.css({top: y+'px', left: x+'px'}).addClass("animate");
        });
    });
/*** End Material-style button click effect ***/

})(jQuery);
</script>

<style>
/*============{{ALL BUTTON}}============*/
.ba-button-style-5.brxe-button:before{
	text-align: center }
.ba-button-style-5.brxe-button{
  	position: relative;
	display: inline-block;
	border: none;
  	overflow: hidden!important;
	transition: all .3s linear;
  	z-index: 1!important;}

/* Position Aware Hover Effect */
.ba-button-style-5.brxe-button {
overflow:hidden;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
z-index: 1 !important;
}
.ba-button-style-5.brxe-button:hover{
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.ba-button-style-5.brxe-button:focus{
color: rgba(13, 13, 13, 1) !important;
}
@media all and (min-width: 981px) {
.ba-button-style-5.brxe-button:after {
margin-left: 0em !important;
}
}
@media all and (max-width: 980px) {
.ba-button-style-5.brxe-button:after {
line-height: 1.7em !important;
}
}
.blob {
z-index: -1;
position:absolute;
width:2px;
height:2px;
margin-left: 0;
margin-top: 0;
background: #1d2230 !important; /* set your color here */
border-radius: 50%;
border-color: #1d2230 !important; /* set your color here */
border-width: 1px;
border-style: solid;
-webkit-transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
}
.expand {
border-color: #1d2230 !important; /* set your color here */
border-width: 500px;
border-style: solid;
-webkit-transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
margin-left:-500px;
margin-top:-500px;
}
/* End Position Aware Hover Effect */

</style>
<script type="text/javascript">
(function($) {
/* Position aware hover effect */
var ofs, x, y;
$('.ba-button-style-5.brxe-button').on('mouseenter', function(e){
ofs = $(this).offset();
x = (e.pageX - ofs.left);
y = (e.pageY - ofs.top);
var name = $(this).text().toLowerCase().split(' ')[0];
$(this).append('<div class="blob ' + name + '" style="left:' + x + 'px; top: ' + y + 'px;"></div>');
var blob = $(this).find('.blob');
setTimeout(function(){
blob.addClass("expand");
},20);
});
$('.ba-button-style-5.brxe-button').on('mouseleave', function(e){
ofs = $(this).offset();
x = (e.pageX - ofs.left);
y = (e.pageY - ofs.top);
var blob = $(this).find('.blob');
blob.css({'left':x, 'top':y});
blob.removeClass("expand");
setTimeout(function(){
blob.remove();
},800);
});
})(jQuery);
</script>

StyleS

bricks Button Styles

Button Style 1 {Button Hover Effect}

Button Style 2 {Button Hover Effect}

Button Style 3 {Button Hover Effect}

Button Style 4 {Button Click Effect}

Button Style 5 {Button Position Aware Hover Effect}

Button Style 1
{Button Hover Effect}

Button Style 2
{Button Hover Effect}

Button Style 3
{Button Hover Effect}

Button Style 4
{Button Click Effect}

Button Style 5
{Button Position Aware
Hover Effect}