Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Background Transitions

    @joshi.manish
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 863
    Comment on it

    Hello readers

    If  you want to use Background Transition on your anchor tag, buttons, div, etc. then code below will be helpful for you.

    According to the code the transition will occurs on hover or and will focus on when time is defined at specific duration.

     

    HTML:

    <html>
</head>
<body>
<div>
	<h3>Background Transitions</h3>
	<a class="btn btn-hvr hvr-fade" href="#">Fade</a>
	<a class="btn btn-hvr hvr-back-pulse" href="#">Back Pulse</a>
	<a class="btn btn-hvr hvr-sweep-to-right" href="#">Sweep To Right</a>
	<a class="btn btn-hvr hvr-sweep-to-left" href="#">Sweep To Left</a>
	<a class="btn btn-hvr hvr-sweep-to-bottom" href="#">Sweep To Bottom</a>
	<a class="btn btn-hvr hvr-sweep-to-top" href="#">Sweep To Top</a>
	<a class="btn btn-hvr hvr-bounce-to-right" href="#">Bounce To Right</a>
	<a class="btn btn-hvr hvr-bounce-to-left" href="#">Bounce To Left</a>
	<a class="btn btn-hvr hvr-bounce-to-bottom" href="#">Bounce To Bottom</a>
	<a class="btn btn-hvr hvr-bounce-to-top" href="#">Bounce To Top</a>
	<a class="btn btn-hvr hvr-radial-out" href="#">Radial Out</a>
	<a class="btn btn-hvr hvr-radial-in" href="#">Radial In</a>
	<a class="btn btn-hvr hvr-rectangle-in" href="#">Rectangle In</a>
	<a class="btn btn-hvr hvr-rectangle-out" href="#">Rectangle Out</a>
	<a class="btn btn-hvr hvr-shutter-in-horizontal" href="#">Shutter In Horizontal</a>
	<a class="btn btn-hvr hvr-shutter-out-horizontal" href="#">Shutter Out Horizontal</a>
	<a class="btn btn-hvr hvr-shutter-in-vertical" href="#">Shutter In Vertical</a>
	<a class="btn btn-hvr hvr-shutter-out-vertical" href="#">Shutter Out Vertical</a>
</div>
</body>
</html>

     

    CSS:

    .btn-hvr {
    background: #e1e1e1 none repeat scroll 0 0;
    border: 0 none;
    color: #666;
    cursor: pointer;
    display: inline-block;
    line-height: 1 !important;
    margin-top: 6px;
    padding: 1em;
    text-decoration: none;
}
.hvr-fade {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    overflow: hidden;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color, background-color;
    vertical-align: middle;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
    background-color: #2098d1;
    color: white;
}
@keyframes hvr-back-pulse {
50% {
    background-color: rgba(32, 152, 209, 0.75);
}
}
@keyframes hvr-back-pulse {
50% {
    background-color: rgba(32, 152, 209, 0.75);
}
}
.hvr-back-pulse {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    overflow: hidden;
    transform: translateZ(0px);
    transition-duration: 0.5s;
    transition-property: color, background-color;
    vertical-align: middle;
}
.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active {
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: hvr-back-pulse;
    animation-timing-function: linear;
    background-color: #2098d1;
    color: white;
}
.hvr-sweep-to-right {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-sweep-to-right::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0 50% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
    color: white;
}
.hvr-sweep-to-right:hover::before, .hvr-sweep-to-right:focus::before, .hvr-sweep-to-right:active::before {
    transform: scaleX(1);
}
.hvr-sweep-to-left {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-sweep-to-left::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 100% 50% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
    color: white;
}
.hvr-sweep-to-left:hover::before, .hvr-sweep-to-left:focus::before, .hvr-sweep-to-left:active::before {
    transform: scaleX(1);
}
.hvr-sweep-to-bottom {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-sweep-to-bottom::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(0);
    transform-origin: 50% 0 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
    color: white;
}
.hvr-sweep-to-bottom:hover::before, .hvr-sweep-to-bottom:focus::before, .hvr-sweep-to-bottom:active::before {
    transform: scaleY(1);
}
.hvr-sweep-to-top {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-sweep-to-top::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(0);
    transform-origin: 50% 100% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
    color: white;
}
.hvr-sweep-to-top:hover::before, .hvr-sweep-to-top:focus::before, .hvr-sweep-to-top:active::before {
    transform: scaleY(1);
}
.hvr-bounce-to-right {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.5s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-bounce-to-right::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0 50% 0;
    transition-duration: 0.5s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
    color: white;
}
.hvr-bounce-to-right:hover::before, .hvr-bounce-to-right:focus::before, .hvr-bounce-to-right:active::before {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.hvr-bounce-to-left {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.5s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-bounce-to-left::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 100% 50% 0;
    transition-duration: 0.5s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active {
    color: white;
}
.hvr-bounce-to-left:hover::before, .hvr-bounce-to-left:focus::before, .hvr-bounce-to-left:active::before {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.hvr-bounce-to-bottom {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.5s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-bounce-to-bottom::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(0);
    transform-origin: 50% 0 0;
    transition-duration: 0.5s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active {
    color: white;
}
.hvr-bounce-to-bottom:hover::before, .hvr-bounce-to-bottom:focus::before, .hvr-bounce-to-bottom:active::before {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.hvr-bounce-to-top {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.5s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-bounce-to-top::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(0);
    transform-origin: 50% 100% 0;
    transition-duration: 0.5s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active {
    color: white;
}
.hvr-bounce-to-top:hover::before, .hvr-bounce-to-top:focus::before, .hvr-bounce-to-top:active::before {
    transform: scaleY(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.hvr-radial-out {
    backface-visibility: hidden;
    background: #e1e1e1 none repeat scroll 0 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    overflow: hidden;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-radial-out::before {
    background: #2098d1 none repeat scroll 0 0;
    border-radius: 100%;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
    color: white;
}
.hvr-radial-in {
    backface-visibility: hidden;
    background: #2098d1 none repeat scroll 0 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    overflow: hidden;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-radial-in::before {
    background: #e1e1e1 none repeat scroll 0 0;
    border-radius: 100%;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(2);
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-radial-in:hover, .hvr-radial-in:focus, .hvr-radial-in:active {
    color: white;
}
.hvr-radial-in:hover::before, .hvr-radial-in:focus::before, .hvr-radial-in:active::before {
    transform: scale(0);
}
.hvr-rectangle-in {
    backface-visibility: hidden;
    background: #2098d1 none repeat scroll 0 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-rectangle-in::before {
    background: #e1e1e1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(1);
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active {
    color: white;
}
.hvr-rectangle-in:hover::before, .hvr-rectangle-in:focus::before, .hvr-rectangle-in:active::before {
    transform: scale(0);
}
.hvr-rectangle-out {
    backface-visibility: hidden;
    background: #e1e1e1 none repeat scroll 0 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-rectangle-out::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active {
    color: white;
}
.hvr-rectangle-out:hover::before, .hvr-rectangle-out:focus::before, .hvr-rectangle-out:active::before {
    transform: scale(1);
}
.hvr-shutter-in-horizontal {
    backface-visibility: hidden;
    background: #2098d1 none repeat scroll 0 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-shutter-in-horizontal::before {
    background: #e1e1e1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(1);
    transform-origin: 50% 50% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
    color: white;
}
.hvr-shutter-in-horizontal:hover::before, .hvr-shutter-in-horizontal:focus::before, .hvr-shutter-in-horizontal:active::before {
    transform: scaleX(0);
}
.hvr-shutter-out-horizontal {
    backface-visibility: hidden;
    background: #e1e1e1 none repeat scroll 0 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-shutter-out-horizontal::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 50% 50% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
    color: white;
}
.hvr-shutter-out-horizontal:hover::before, .hvr-shutter-out-horizontal:focus::before, .hvr-shutter-out-horizontal:active::before {
    transform: scaleX(1);
}
.hvr-shutter-in-vertical {
    backface-visibility: hidden;
    background: #2098d1 none repeat scroll 0 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-shutter-in-vertical::before {
    background: #e1e1e1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(1);
    transform-origin: 50% 50% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-shutter-in-vertical:hover, .hvr-shutter-in-vertical:focus, .hvr-shutter-in-vertical:active {
    color: white;
}
.hvr-shutter-in-vertical:hover::before, .hvr-shutter-in-vertical:focus::before, .hvr-shutter-in-vertical:active::before {
    transform: scaleY(0);
}
.hvr-shutter-out-vertical {
    backface-visibility: hidden;
    background: #e1e1e1 none repeat scroll 0 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: color;
    vertical-align: middle;
}
.hvr-shutter-out-vertical::before {
    background: #2098d1 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(0);
    transform-origin: 50% 50% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active {
    color: white;
}
.hvr-shutter-out-vertical:hover::before, .hvr-shutter-out-vertical:focus::before, .hvr-shutter-out-vertical:active::before {
    transform: scaleY(1);
}

    see the live demo at http://theme.stepofweb.com/Smarty/v1.1.4/HTML/shortcode-buttons-2.html

    I have attached the full code packet at the bottom

     

    css3 Background Transition html
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: