I have tried to add transitions to my input forms but it doesn't work. I've read a lot of stack overflow posts but they haven't worked for me. A person said that it's because input has display: none but even after changing it, it still didn't work. I tried to be more specific when using transition but that didn't work. So I'm not sure how to fix this issue. The transition applies to the button but not to the input forms.
https://codepen.io/i-am-programming/pen/gOmydqv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<nav>
Home
About
Store
Contact Us
</nav>
<div class="container">
<h1 class="login">Log In</h1>
<input type="text" placeholder="Username" class="username info" />
<input type="password" placeholder="Password" class="pass info" />
<input type="button" class="button" value="Submit" />
</div>
<script src="app.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
font-size: 25px;
font-family: "Montserrat", sans-serif;
}
body {
background: url("images/background.jpeg");
background-size: cover;
}
a {
text-decoration: none;
margin-right: 30px;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
padding: 8px;
transition: 0.3s ease;
}
nav {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
a:hover {
color: black;
background-color: rgba(255, 255, 255, 0.7);
}
.container {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 450px;
background-color: rgba(0, 0, 0, 0.7);
align-items: center;
}
.login {
color: white;
margin-top: 50px;
font-size: 45px;
}
input {
outline: none;
padding: 5px;
transition: 0.3s;
}
input:hover {
width: 400px;
}
.username {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.pass {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
width: 150px;
margin-top: 250px;
}
Firstly your code in text and link are different. Secondly you can't use transition on display cause it's not animatable. You cna use opacity and visibility instead of display. If we come to our question..
You want to get bigger input place when user get hover it right? So in your example your input does not has any width and when you hover it you want to get a transition. For this you need to add a width value to your input so it will know where the change began and what you want at the end. Meanwhile the time you passed is your time attribute on your transition. So
input {
height: 30px;
width: 300px;
outline: none;
transition: 0.3s;
}
input:hover {
width: 400px;
}
It will know that when user hover on it, it will grow to 400px from 300px in 0.3s. That's it. Hope you get it.
I think you are missing transition property in the input, it will be like this:
input {
height: 30px;
width: 300px;
outline: none;
transition: all 0.5s ease;
}
input:hover {
width: 500px;
}
Read more of the CSS transition
It's because you didn't specify the width of your input
Related
I have a top navbar with links of different width.
Currently, whenever a link is clicked it changes its color and adds a bottom border. I want to create a line instead of the bottom border to slide from link to link whenever a new one is selected.
Any idea how I can implement such an animation?
I don't think you can achieve the effect with CSS only. Some simple scripting gonna be required. Here's a codepen and the code:
<nav>
<a>Home</a>
<a>About</a>
<a>Our Wonderfull and Usefull Products</a>
<a>Services</a>
<a>Contacts</a>
</nav>
nav{
display: flex;
align-items: center;
justify-content: center;
position: relative;
--decoration-left: 50%;
--decoration-width: 0;
}
nav a{
padding: .5em .2em;
margin: 0 1em;
cursor: pointer;
}
nav::after{
content: '';
position: absolute;
bottom: 0;
left: var(--decoration-left);
width: var(--decoration-width);
height: 4px;
background: skyblue;
transition: 300ms;
}
document.addEventListener('DOMContentLoaded',function(){
var nav = document.querySelector('nav');
nav.addEventListener('mouseover',function(event){
if( event.target.tagName == 'A' ) {
nav.style.setProperty(
'--decoration-left',
event.target.offsetLeft + 'px'
);
nav.style.setProperty(
'--decoration-width',
event.target.offsetWidth + 'px'
);
}
})
})
I really can't make out what are you saying but,
Do you mean this? :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #111;
}
a {
color: #fff;
text-decoration: none;
position: relative;
font-size: 3rem;
}
a::after {
content: "";
width: 0%;
height: 2px;
border-radius: 99px;
position: absolute;
left: 0;
bottom: 0;
background: dodgerblue;
transition: 0.3s ease;
}
a:focus::after {
width: 100%;
}
</style>
<title>Document</title>
</head>
<body>
Something
</body>
</html>
I am fairly new at making responsive css and I have not done much yet.
If you open the following code in fullscreen and change the height of the tab, the smaller the height, the more of a gap there is between my hero and about section.
I want the gap to remain the same size on all devices.
Hopefully you can help,
Thanks.
body {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#header {
border-radius: 15px;
margin-top: -0.8%;
background-image: url(./images/DJI_0410-Enhanced.jpg);
background-size: cover;
background-position: right;
width: 98.5%;
height: 94%;
}
#title {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-left: 8%;
}
h1 {
color: #f7f4f7;
margin-top: 10%;
font-size: 4.5vw;
font-weight: 700;
margin-bottom: 0;
}
#subTitle {
color: white;
}
h2 {
font-size: 3.6vw;
font-weight: 600;
margin-top: 10%;
}
button {
font-family: "Poppins", sans-serif;
font-weight: 600;
width: 7.5rem;
height: 3rem;
border-radius: 10px;
cursor: pointer;
}
.bookNow {
background-color: #f8f8f8;
color: #2B3758;
margin-right: 0.4rem;
transition: 200ms linear;
border: none;
}
.bookNow:hover {
background-color: #e6e3e6;
color: #2B3758;
}
.learnMore {
background-color: #2B3758;
color: #f7f4f7;
margin-left: 0.4rem;
transition: 200ms linear;
border: none;
}
.learnMore:hover {
background-color: #4e6090;
color: #f7f4f7;
}
#navBar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 2% 8% 0% 8%;
}
.logo {
width: 18%;
height: 18%;
}
li a {
text-decoration: none;
}
.page {
color: white;
}
.otherPages {
color: #585858;
transition: 200ms linear;
}
.otherPages:hover {
color: white;
}
.bookNow {
margin-right: 8%;
overflow: hidden;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
font-weight: 400;
}
.bookNowNav {
background-color: rgba(255, 255, 255, .3);
overflow: hidden;
border-radius: 15px;
border: 2.5px solid white;
padding: 0px;
transition: 200ms linear;
color: white;
margin-left: 25px;
}
.bookNowNav:hover {
background-color: rgba(230, 230, 230, 0.5);
}
#about {
position: absolute;
margin-top: 860px;
left: 50%;
transform: translateX(-50%);
width: 82.5%;
}
#aboutImage {
display: inline-block;
background-image: url(./images/DJI_0216.jpg);
background-size: cover;
background-position: center;
width: 47.8%;
height: 475px;
border-radius: 15px;
margin-right: 2%;
}
#aboutInfo {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 47.8%;
margin-left: 2%;
padding-top: 10px;
margin-top: -38px;
}
h2 {
position: justify;
margin-bottom: 30px;
}
.info {
color: rgb(140, 140, 140);
line-height: 30px;
text-align: justify;
height: 240px;
font-weight: 300;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Above Photography</title>
</head>
<body>
<div id="header" class="center">
<div id="navBar">
<img class="logo" src="./images/AbovePhotographyLogo.png" alt="Logo">
<nav>
<ul class=n av__links>
<li><a class="page" href="#">Home</a></li>
<li><a class="otherPages" href="#">Photography</a></li>
<li><a class="otherPages" href="#">Videography</a></li>
<li><a class="otherPages" href="#">Contact</a></li>
<button class = "bookNowNav">Book Now</button>
</ul>
</nav>
</div>
<div id="title">
<h1>Above <br>Photography</h1>
<h2 id="subTitle">Taking The<br>Perfect Picture</h2>
<button class="bookNow">Book Now</button>
<button class="learnMore">Learn More</button>
</div>
</div>
<div id="about">
<div id="aboutImage"></div>
<div id="aboutInfo">
<h2 class="">
About
</h2>
<p class="info">
My name is Max Herczeg and I'm a Grade 8 student from Toronto, Ontario. I have been flying drones for over 4 years and I've taken several photography courses as well. My passion for both of these interests has led me to create Above Photography. My age
allows me to provide clients with an affordable cost for a high-end final product. Above Photography has a creative and fun approach to each project. My company uses the high-end DJI Air 2S Drone. It shoots 5.4K video resolution and 20 mega pixel
pictures. This means that both photos and videos will look outstanding.
</p>
<button class="seeWork">Learn More</button>
</div>
</div>
Like mentioned by Ouroborus in the comments, there is no short answer here and there are several reasons:
You’re setting both the header (.center) and the #about divs to position: absolute.
Absolute positioning removes elements from the normal document flow and has several side effects.
Your header’s height is set to a percentage value & it has no relative positioned parent container with a set height.
So it gets its height from the <body>, which at the same time is your viewport’s height.
In other words, if your viewport changes height, so does your #header too.
You're setting a fixed margin-top: 860px to the #about section, but your #header dimensions are not fixed, like explained in point 2.
So putting it all together this means that whenever you make the viewport anything shorter than 860px, the margin on the about section remains at 860px BUT your header shrinks with the viewport. Thus why the shorter the height, the larger the gap in between. This is how It works.
Note: If you make your window taller, because the header is 94% height of the body, it will actually overlap the about section. *You can see this clearly by setting a background-color to the #header and making your window 1600px tall for example.
Also, when you do this, as is your #title will be centered vertically in the document... Potentially being out of place with your header's content and/or even overlapping with the about image (or any other content).
My suggestion is:
Move away from position absolute unless strictly necessary for complex inner layouts. You don't need the header container or the about to be absolute.
Before trying to do responsive layouts, make sure you understand how CSS box-model, display, and positionworks.. As well as flexbox and/or grid layouts (Even floats, if you want to learn like in the old days).
https://www.w3schools.com/css/ is a great place to start. Happy coding.
I am trying to create a website. In which there is an animated search bar which I got from youtube. I am trying to use flexbox for my navbar and everything works except for the position of my search bar. The picture of my nav bar until now.
and this the code for my html and css some of it is cut out.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/20c0c25f7c.js" crossorigin="anonymous"></script>
<title>HTML Elements Reference</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<style>
body{
font-family: Helvetica, sans-serif;
background: black;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}
.search-box{
display:inline-block;
transform: translate(0%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box > .search-btn {
background: black;
}
.search-btn{
color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
</style>
</head>
<body>
<nav class="container">
<div class="search-box">
<input class= "search-txt" type="test" name="" placeholder="Search...">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</nav>
</body>
</html>
Can you help me out with the CSS and HTML and try not to use margin property for the search bar.
I would like the search bar to be fully centered in my flexbox.
As mdn says:
The translate() CSS function repositions an element in the horizontal
and/or vertical directions. Its result is a data
type.
So it is necessary just remove property transform: translate(0%, -50%); to place correctly your searchbar:
.search-box{
display:inline-block;
background: lightseagreen;
height: 40px;
border-radius: 40px;
padding: 10px;
}
An example:
body{
font-family: Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}
.search-box{
display:inline-block;
background: lightseagreen;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box > .search-btn {
background: lightgreen;
}
.search-btn{
color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: lightpink;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<nav class="container">
<div class="search-box">
<input class="search-txt" type="test" name="" placeholder="Search...">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</nav>
UPDATE:
When you use double percentage values transform: translate(0%, -50%); in translate function, then the second value is for the height of the reference box:
This value describes two or
values representing both the abscissa (x-coordinate) and
the ordinate (y-coordinate) of the translating vector. A percentage as
first value refers to the width, as second part to the height of the
reference box defined by the transform-box property.
I want to make a rotating animation for the search icon, that when the input gets focused, then the icon rotates 90 degrees around the Y-axis, and then the text cursor appears, so it's like the search icon being transformed into the text cursor (try it with the code snippet below), but when I apply the transform property to the icon which is a png image, it gets pixelated and it doesn't look good, Is there a way to fix this problem?
Here's the difference:
.Navbar {
display: flex;
padding: 50px;
align-items: center;
justify-content: center;
}
.Navbar .SearchBox {
position: relative;
}
.Navbar .SearchBox input {
background-color: darkgray;
border-style: none;
color: transparent;
padding: 0px 16.5px 0px 10px;
font-family: 'vazir';
border-radius: 6px;
height: 35px;
outline: none;
width: 300px;
direction: rtl;
}
.Navbar .SearchBox img {
height: 17px;
position: absolute;
top: 9px;
right: 8px;
transform: rotateY(0deg);
transition: transform .3s ease-out;
}
.Navbar .SearchBox input:focus {
color: white;
transition: color 0s ease .3s;
}
.Navbar .SearchBox input:focus + img {
transform: rotateY(90deg);
transition: transform .3s ease-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header class="Navbar">
<div class="SearchBox">
<input type="text">
<img src="https://i.ibb.co/DRLFR0w/search.png" alt="search">
</div>
</header>
</body>
</html>
This happens because when you define a transformation on the element it will create a new stacking context which will make the element have its own path in the renderer. Chrome apparently applies a different antialiasing algorithm for such elements in their own stacking context.
To workaround that, you can simply omit that rule and let the transition start from initial:
body{ background: #333 }
img { height: 17px; }
.transform {
transition: transform .3s ease-out;
}
:hover>.transform {
transform: rotateY(90deg);
}
<span><img src="https://i.ibb.co/DRLFR0w/search.png" alt="search"></span>
<span>
<img class="transform" src="https://i.ibb.co/DRLFR0w/search.png" alt="search"></span>
I've been attempting to get multiple buttons to align vertically and horizontally next to each other in the center of the page. This is what I am aiming for: aligned buttons
However, I have only either gotten the images to center, but then they are not horizontally aligned. Or, I have gotten them to align horizontally, but they are not centered. Here is the code I am using on the buttons.
//used to remove the transition item so that the image changes. This is necessary to show image transition on load.
$(".hoverImage").removeClass("transitionHoverImage")
//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);
$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);
$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
font-family: Oswald, Baloo, Calibri, sans-serif;
background: black url(../images/background.jpg) no-repeat center;
height: 3600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.about {
display: block;
text-align: center;
background-color: #ffffff rgba(255, 255, 255, 0.5);
position: relative;
width: 904px;
padding: 33px 27px 34px;
z-index: 1;
}
.logo {
position: fixed;
left: .25em;
top: 3%;
height: 210px;
width: 150px;
z-index: 1;
}
/* you want to set up a transform, translate for this transform: translate (0, -100px); and */
.hoverImage {
position: relative;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.transitionHoverImage {
transform: translate(0px, 200px);
}
.door {
transition: transform 1.5s ease-out;
}
.welcomeText {
position: relative;
top: 120px;
z-index: 1;
font-size: 7em;
color: white;
text-align: center;
}
.centerBtns {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -700px;
text-align: center;
width: 15%;
margin: 0 auto;
font-size: 2em;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
padding: 1.5em 2.8em;
z-index: 2;
}
.resumeBtn {
}
.portfolioBtn {}
/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
display: none;
position: fixed;
right: 2em;
top:3%;
background-color:#343434;
min-width: 1em;
border-radius: 1em;
box-shadow: .25em 0em .5em #343434;
padding: 0em;
z-index: 1;
}
/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
background-color: dimgray;
}
/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
display:block;
}
/*revealed dropdown style */
.dropdown-content a {
color: lightgray;
border-radius: 6px;
border-style: solid;
border-color: #343434;
background-color: #343434;
font-weight: bold;
text-align: center;
padding: .5em;
text-decoration: none;
display: block;
}
/*menu button for dropdown*/
.menu-button {
position: fixed;
right: 2em;
top:3%;
font-weight: bold;
font-size: 1em;
color: lightgray;
padding: 1em;
background-color: #343434;
border-color: #343434;
border-style: solid;
border-width: 2px;
border-radius: 6px;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet">
</head>
<body>
<!--Menu Bar-->
<div class="dropdown">
<button class="menu-button">MENU</button>
<div class="dropdown-content">
HOME
ABOUT
ARTWORK
RESUME
SOCIAL
</div>
</div>
<!--Logo-->
<div>
<img class ="logo" src="images/logo.png">
</div>
<!--Welcome Text-->
<div>
<header>
<h1 class='welcomeText'>WELCOME</h1>
</header>
<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">
</div>
<!--Buttons-->
<div>
<button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>
<!--About-->
<div>
<header>
<h1><a name="about">ABOUT</a></h1>
</header>
</div>
</body>
<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>
Thanks for your help!
Flexbox does this easily. Use display: flex; justify-content: center; align-items: center; on the parent.
div {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
background: black;
}
<div>
<button>button</button>
<button>button</button>
</div>
Using flexbox is indeed the simplest solution, but just in case I re-arranged your CSS:
.centerBtns {
position: relative;
text-align: center;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
z-index: 2;
width: 40%;
font-size: 1.5em;
padding: 1.5em;
line-height: 3em;
}
<div>
<button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
If you want both buttons to have the same width make sure the width % is large enough to contain the text. Or if not just remove the width property and tweak around with the last 3 properties to get the results you want.
There are some issues with the code you've provided, and I believe that may be making it difficult to isolate the problem.
A stripped down version of what you posted shows how this can be achieved with a combination of relative positioning and flexbox.
body {
height: 100vh;
background-size: auto auto;
background-color: red;
position: relative;
}
.nav {
border: solid 1px blue;
background: rgba(0,0,255,0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 750px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__button {
font-size: 44px;
margin: 50px;
width: 250px;
padding: 30px 0;
}
<div class="nav">
<button class="nav__button">Portfolio</button>
<button class="nav__button">Resume</button>
</div>
Plunker mirror of the above here: http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6
You can use FlexBox. If you have a few buttons, you can set the "justify-content" property as "center", and set a margin to each button. On the other hand, if you have many buttons, you can set the "justify-content" as "space-around", and remove the margin.
https://jsfiddle.net/pablodarde/nhxukt5c/
HTML
<div class='buttons'>
<button>
<b>PORTFOLIO</b>
</button>
<button>
<b>RESUME</b>
</button>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.buttons button {
display: inline-flex;
margin: 5px;
}