I am trying to increase the hit area of the link in the menu but doing so also increases the underline effect of the text. I have tried padding and width but no imrprovement. I want a effect just like the one present in highfive mobile menu(Underline from left). Here is the fiddle and Here is the code
.hvr-underline-from-left {
text-decoration:none;
padding: 3px 0;
color: #000;
cursor: pointer;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom : 7px;
background: #E13F3F;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
right: 0;
}
<html>
<body>
<a class="hvr-underline-from-left" href="#">About </a>
</body>
</html>
You could add a span within the a-tag and put the underline effect on the span instead.
This way you can add padding to your link element without it affecting the underline effect.
a {
padding: 20px;
display: inline-block;
background: #eee;
}
.hvr-underline-from-left {
text-decoration: none;
padding: 3px 0;
color: #000;
cursor: pointer;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 7px;
background: #E13F3F;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a:hover .hvr-underline-from-left:before,
.hvr-underline-from-left:focus:before,
.hvr-underline-from-left:active:before {
right: 0;
}
<html>
<body>
<span class="hvr-underline-from-left">About</span>
</body>
</html>
Related
I am trying to make a responsive landing page that changes it's format for mobile devices. I have tried using both flex box and bootstrap's grid system to do this but I guess I'm doing something wrong. I want the three parts of the heading to occupy a separate line on mobile devices while all being on the same line for larger devices and the same for the three buttons. At the moment this is working when I simply minimize the window on my laptop but it is not working when I view the page on my mobile devices.
I also want the instagram button to stay centered at the bottom on all devices.
My html looks like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> <span id="Rebecca"> Rebecca </span> <span id="Bermingham"> Bermingham </span> <span id="Maguire"> Maguire</span></h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS looks like this:
/These are the general bits/
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100vh;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--blue);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
#Rebecca{
color: var(--purple);
}
#Bermingham{
color: var(--lime);
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Hover effects for 3 buttons*/
/*Left Button*/
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--purple);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: var(--white);
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/*Middle Button*/
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--lime);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: var(--purple);
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Right Button */
.hvr-sweep-to-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-left:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--blue);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
color: var(--black);
}
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2); // here
}
The current landing page can be viewed at www.rebeccabm.github.io . Any help would be greatly appreciated :)
Thanks
Each span should be set to display:block; in the particular media query used per break point. The example below should be placed in your CSS. Do note, it's best practice to start building with "Mobile First" in mind, or you'll have to reset the span for larger views.
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
.intro span {display:block;}
}
Please use bootstrap framework either use media query css
i.e. :
For iPad
#media and(max-width:767px){
}
For iPhone or any small media devices :
#media and(max-width:480px){
}
I have a problem when I try to use overflow: hidden; to hide a background effect on a button. I see one pixel around of border-radius in Chrome:
What can I do to hide these pixels? I can try to use box-shadow, but maybe you know an easier way.
JsFiddle
test
Css:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden; /* <-- I try hide background but always get http://screencast.com/t/qktgZwmVtH */
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
you may use an inset shadow:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
border-radius: 20px;
cursor: pointer;
overflow:hidden;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 0px;
right: 0px;
background: #f0913a;
transition: 0.5s;
border-radius: inherit;
box-shadow: inset 0 0 0 0 #181818;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
box-shadow: inset 0 0 0 150px #181818;
}
test
it doesn't eradicate the bug , but the black is not there bleeding anymore.
to avoid the bug, Use another method, you may use a background-image such as a css gradient and resize it on hover (no pseudo involved either). example:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
background: linear-gradient(black, black) left no-repeat, linear-gradient(black, black) right no-repeat #f0913a;
background-size: 0 100%;
transition: background-size 0.3s;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.hvr-shutter-in-horizontal:active,
.hvr-shutter-in-horizontal:focus,
.hvr-shutter-in-horizontal:hover {
background-size: 100% 100%;
}
test
you just need to add background-clip:padding-box; on class .hvr-shutter-in-horizontal
CSS:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
Demo on jsfiddle: https://jsfiddle.net/hamzanisar/wd9exfmx/9/
remove the overflow:hidden from the .btn class and change the left, right properties for the :before element, also set the border-radius to inherit for the :before element check the fiddle here for eg https://jsfiddle.net/0ap4qbrn/
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: -2px;/*equal to the border width of .btn but negated*/
right: -2px;/*equal to the border width of .btn but negated*/
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
border-radius: inherit;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
give box-sizing:border-box; with webkit and moz prefix this may solve your issue
I've got a problem with the navigation of my website. There's a button defined with "display: inline;", because otherwise the buttons wouldn't appear horizontal to each other.
Then I have a animation, a hover effect. There it has to be "display: inline-block;", because Firefox wouldn't play the animation without that.
The problem is that I've defined "display: inline;" first, so Firefox just ignores "display: inline-block;" and the animation doesn't play. The problem is only in Firefox, not in Chrome and not even in IE.
So here's the HTML-code:
<div id="nav">
<li class="sweep">PROJECTS</li>
</div>
And here's the CSS:
#nav {
float: right;
width: auto;
font-size: 25px;
margin: 12px 10px 0px 0px;
}
#nav li {
list-style-type: none;
display: inline;
margin-right: 20px;
padding: 5px 10px 5px 10px;
}
#nav a {
text-decoration: none;
color: #3a96d3;
}
.sweep {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.sweep:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3a96d3;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.sweep:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
color: white;
}
.sweep:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
Thanks for your answers!
It shouldn't make a difference if you set #nav li also to display: inline-block;
Created a LightBox effect using pure CSS and HTML, no JS. The image appears, but on the right side of the screen, halfway cut off, and partially underneath my Nav bar. Half of the screen is shaded behind the image.
It appears like it would work, aside from it being off-center and behind the navigation. From the code at hand, is there anything that appears it could be doing this? I'd be happy to post more code if necessary. Thank you!
/*Eliminates padding, centers the thumbnail */
body,
html {
padding: 0;
margin: 0;
text-align: center;
float: left;
}
/* Styles the thumbnail */
a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
margin: 94px 20px 20px 20px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
clear: both;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
<div id="gravel-button">
<a class="lightbox" href="#gravel-1">
<h7>Photo & Info</h7>
</a>
</div>
<div class="lightbox-target" id="gravel-1">
<img src="http://www.sbsg.com/wp-content/uploads/2010/02/58minus.jpg">
<a class="lightbox-close"></a>
</div>
I am using a button I found on the internet but I cannot manage to work this out:
The button has a hover effect that brings down an image, the only way I can get it to show an image instead of text is with the attribute.
.icon-cart:before {
content: url("http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif");
}
Is there a way to either style this image or replace it with a standard img or div?
Here is the JS-Fiddle
Check this working fiddle.
HTML
<button class="btn btn-5 btn-5a icon-cart"><span class='fbtext'>Facebook</span><img class='fbimage' src='http://twiki.org/p/pub/TWiki/TWikiDocGraphics/facebook.gif'/></button>
CSS
.btn {
border: none;
font-family: Arial;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* Button 5 */
.btn-5 {
background: #000;
color: #fff;
position:relative;
height: 70px;
min-width: 260px;
line-height: 24px;
font-size: 16px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5 .fbimage{
position:absolute;
left:50%;
bottom:100%;
margin-left:-8px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:hover .fbimage{
bottom:50%;
margin-bottom:-8px;
}
.btn-5:active {
background: #0F0F0F;
}
.btn-5 span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}