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){
}
Related
I need this to be placed 20px from the bottom of the page, but every time I try to give it absolute positioning, it jumps halfway outside the div or it becomes longer.
It was centered using display:flex and justify-content:center. The exact same problem occurs with the socila icons, which need to be at the top on desktop and at the bottom on mobile, but if I give them an absolute position, then they are no longer centered.
Here is the entire page for you to see what I need, and thank you so much for your time:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/234b945d49.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
transition: 0.3s;
}
#main-menu-container{
right:0;
}
.sidenav {
padding:0;
height: 100%;
margin:0;
width: 0px;
position: fixed;
z-index: 1;
top: 0px;
right: 0;
background: radial-gradient(#3d77a7, #264c6d);
overflow-x: hidden;
transition: 0.5s ease-in-out;
text-align: center;
}
.sidenav ul{
list-style: none;
padding: 150px 0 0 0;
text-align:center;
display: inline-block;
}
.sidenav ul a {
padding: 8px 8px 8px 8px;
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
color:white;
font-weight:bold;
display: block;
transition: 0.3s;
}
.sidenav ul a:hover {
color: #ffdc00;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 20px;
font-size: 36px;
margin-left: 50px;
color:#ffdc00;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/* #media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
} */
#nav-icon3 {
width: 40px;
height: 30px;
position: fixed;
top:20px;
right:20px;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #ffdc00;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.social-icons {
display: flex;
justify-content: center;
position:absolute;
top: 20px;
}
.social-icons i{
color:#ffdc00;
padding:5px;
transition: 0.3s;
}
.social-icons i:hover{
color: white;
}
.menu-separator {
/* position:relative;
bottom:50px; */
border: none;
border-radius: 2px;
height: 7px !important;
opacity: 100%;
color: #ffdc00; /* old IE */
background: #ffdc00; /* Modern Browsers */
width: 80%;
margin: 20px auto 20px auto;
}
.menu-additional-links{
display: flex;
justify-content: center;
width: 80%;
margin: auto;
}
.menu-additional-links a{
text-decoration: none;
padding: 20px 15px 20px 15px;
color: white;
}
.menu-additional-links a:hover{
color: #ffdc00;
}
/*MOBILE BREAKPOINTS*/
#media only screen and (max-width: 768px) {
}
</style>
</head>
<body>
<div id="main-menu-container">
<div id="mySidenav" class="sidenav" role="navigation">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
<div class="social-icons">
<i class="fab fa-facebook-square fa-2xl"></i>
<i class="fab fa-instagram-square fa-2xl"></i>
<i class="fab fa-linkedin fa-2xl"></i>
</div>
<hr class="menu-separator">
<div class="menu-additional-links">
Datenschutzerklärung
Impressum
</div>
</div>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span class="breakpoint"></span>
</div>
<script>
//check screen width via javascript, and pass a diffrent width to the nav menu
const mediaQuery = window.matchMedia('(min-width: 768px)')
let menuWidth = "";
if (mediaQuery.matches){menuWidth = "500px";} else {menuWidth = "100vw";}
function handleScreenChange(e){
if (mediaQuery.matches){
menuWidth = "500px";
} else {
menuWidth = "100vw";
}
}
mediaQuery.addListener(handleScreenChange);
//set the width and play the animation on hamburger click
$("#nav-icon3").click(function() {
if (document.getElementById('nav-icon3').classList.contains("open")){
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
else{
document.getElementById("mySidenav").style.width = menuWidth;
document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
}
document.getElementById('nav-icon3').classList.toggle("open");
});
</script>
</body>
</html>
You can try with this styles to hr
position: absolute;
bottom: 20px;
margin-left: 10%;
You have 80% for the width, so a left of 10% makes hr centered
I’m trying to make a menu open button for my website, but there’s one slight problem, when I try to assign it to move vertically, for example do margin-top: 100px it won’t move. But when I set a margin-left it changes position and moves horizontally! I have no idea as to why this is happening. I would love to get some advice on how to put the menu button a bit further downwards. I have a feeling it has something to do with the attribute being a span, but I have no idea. Any help is greatly appreciated.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
background-size: cover;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navMenu a {
color: #f6f4e6;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
font-size: 40px;
display: inline-block;
width: 160px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
padding: 0px;
padding-bottom: 5px;
}
.navMenu a:hover {
color: #fddb3a;
}
.navMenu .dot {
width: 6px;
height: 6px;
background: #fddb3a;
border-radius: 50%;
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover~.dot {
-webkit-transform: translateX(80px);
transform: translateX(80px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(2):hover~.dot {
-webkit-transform: translateX(240px);
transform: translateX(240px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(3):hover~.dot {
-webkit-transform: translateX(400px);
transform: translateX(400px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(4):hover~.dot {
-webkit-transform: translateX(570px);
transform: translateX(570px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 50%;
width: 100%;
text-align: center;
}
.overlay .closebtn {
position: absolute;
top: 20px;
margin-right: 20px;
right: 45px;
font-size: 120px;
}
.openNav {
font-size: 50px;
margin-left: 100px;
color: black;
}
#media screen and (max-width: 1305px) {
.dot {
display: none;
}
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="index.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<nav class="navMenu">
Home
Blog
Work
About
<div class="dot"></div>
</nav>
</div>
</div>
<span class="openNav" style="cursor: pointer;" onclick="openNav()">☰</span>
</body>
</html>
I have a feeling it has something to do with the attribute being a span
That is right, because the span is by default has display: inline, and if you change it to display: block and apply some margin-top: 100px you see it changes the position.
.openNav{
display: block;
margin-top: 100px;
}
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;
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>