Convert button to on hover transition - javascript

I've come across the following code online for a nice button that when clicked appears to be pressed.
I'd like to add a transition with the button appearing pressed on hover not on click.
How can I do this?
/**
* AddToCalendar Icon Style
* http://addtocalendar.com
*/
/* Base */
.addtocalendar var{
display: none;
}
.addtocalendar {
position: relative;
display: inline-block;
background: transparent!important;
}
.atcb-link {
display: block;
outline: none!important;
cursor: pointer;
}
.atcb-link:focus~ul,
.atcb-link:active~ul,
.atcb-list:hover{
visibility:visible;
}
.atcb-list {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
width: 170px;
z-index: 900;
}
.atcb-list,
.atcb-item
{
list-style: none;
margin: 0;
padding: 0;
background: #fff;
}
.atcb-item {
float: none;
text-align: left;
}
.atcb-item-link
{
text-decoration: none;
outline: none;
display: block;
}
.atcb-item.hover,
.atcb-item:hover {
position: relative;
z-index: 900;
cursor: pointer;
text-decoration: none;
outline: none;
}
/* Orange */
.atc-style-glow-orange .atcb-list{
margin: 10px 0px 0px 0px;
padding: 0;
color: #fff;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
border-radius: 4px;
}
.atc-style-glow-orange .atcb-link
{
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-size: 1em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.atc-style-glow-orange .atcb-link:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
.atc-style-glow-orange .atcb-link,
.atc-style-glow-orange .atcb-link:hover,
.atc-style-glow-orange .atcb-link:active,
.atc-style-glow-orange .atcb-link:focus
{
color: #fff;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
outline: none;
padding: 7px 25px;
}
.atc-style-glow-orange .atcb-list {
width: 170px;
border: 1px solid #fff;
border: 1px solid rgb(186,186,186);
border-radius: 2px;
box-shadow: 0 0 5px #AAA;
}
.atc-style-glow-orange .atcb-list,
.atc-style-glow-orange .atcb-item
{
background: #fff;
color: #000;
}
.atc-style-glow-orange .atcb-item,
.atc-style-glow-orange .atcb-item-link
{
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
.atc-style-glow-orange .atcb-item-link,
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
color: #000;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
outline: none;
padding: 5px 15px;
}
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
color: #fff;
background: rgba(219,87,5,1);
}
.atc-style-glow-orange .atcb-item.hover,
.atc-style-glow-orange .atcb-item:hover {
background: rgba(250,203,175,1);
}
<span class="addtocalendar atc-style-glow-orange" id="atc_btn_orange" data-on-button-click="atcButtonClick" data-on-calendar-click="atcCalendarClick">
<a class="atcb-link">Add to Calendar</a>
</span>
</div>

Provide hover to the class which you need like,
.classname:hover{
background-color:#FF0000;
}

Change this:
.atc-style-glow-orange .atcb-link:active {
to this:
.atc-style-glow-orange .atcb-link:hover {
Here is the JSFiddle demo

Related

Why the same button animation cannot use inside form?

I tried to add an animation for my form submit button on my Todo list.
Unfortunately, the same button animation works outside form, but inside form only can hover the text. I have no idea where the problem is?
import React from "react";
class TodoForm extends React.Component {
render() {
return (
<div>
<div className={"container"}>
<form action="">
<h1>Todo List</h1>
<input type="text" placeholder={""}/>
<button className="custom-btn btn">Submit</button>
</form>
<button className="custom-btn btn">Submit</button>
</div>
</div>
);
}
}
export default TodoForm;
.container {
display: flex;
flex-direction: row;
/*align-items: center;*/
justify-content: center;
margin-top: 5%;
}
form {
height: 500px;
width: 400px;
background-color: #f4f7fc;
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}
h1 {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
input[type='text'] {
border: 1px solid #ddd;
height: 6%;
min-width: 60%;
transition: all ease-in 0.25s;
}
.custom-btn {
margin-left: 5px;
width: 25%;
height: 37px;
border-radius: 5px;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
}
.custom-btn, input[type='text'] {
box-shadow: 1px 1px 1px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
.btn {
border: 2px solid #f4f7fc;
color: #f59cb1;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
.btn:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn:hover {
color: #FF6F91;
}
.btn:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn:active {
top: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
The background color doesn't let you see the animation, just comment it;
form {
height: 500px;
width: 400px;
/*background-color: #f4f7fc;*/
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}

How can I make a div slowly slide out (with CSS' transition property) when a specific button is clicked?

I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>

Problems with my menu

I hope the following problem won't give you a headache because it is too late for me. Anyway, I am creating a menu for my website but there is a problem: when you switch to mobile view, the menu displays at the top of the first page and when you press the hamburger icon it displays under it. It should not display at all, only when the button is pressed, you also see a weird animation when it switches to mobile view.
HTML:
<header>
<nav>
<ul id="nav" style="top:-15rem;">
<li class="nav_link">HOME</li>
<li class="nav_link">ABOUT</li>
<li class="nav_link">WORK</li>
<li class="nav_link">CONTACT</li>
</ul>
<div id="bg_fix" class="shadow_on">
<a id="logo"> <span class="font">Nadia</span> <img src="images/logo.png" alt="logo"></a>
<div id="burger"> <span></span> <span></span> <span></span> </div>
</div>
</nav>
</header>
CSS:
p, h1, h2, h3, h4, li, a, button {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #3d3d3d;
}
a {
text-decoration: none;
}
.font {
font-family:'Montserrat', sans-serif;
font-size:30px;
}
header {
background-color: #ffffff;
display: inline;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:100;
}
#bg_fix {
padding: 0.5em 1em 0.5em;
display: block;
position: absolute;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 1;
transition: all 0.7s ease-in-out;
}
.shadow_on {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav {
transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav li {
cursor: pointer;
display: block;
border-bottom: 1px #E5E5E5 solid;
text-decoration: none;
text-align: center;
color: #3d3d3d;
padding: 1rem 0;
background-color: #ffffff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#nav li:last-child {
border-bottom: 0;
}
#nav li:active {
background-color: #E5E5E5;
}
#logo {
display: inline-block;
cursor: pointer;
}
#logo img {
height: 2rem;
}
#burger {
margin-top: 0.6rem;
float: right;
display: inline;
width: 1.4em;
vertical-align: middle;
-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;
}
#burger span {
display: block;
height: 0.15rem;
margin-top: 0.3rem;
width: 100%;
background-color: #3d3d3d;
opacity: 1;
left: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
#burger span:first-child {
margin-top: 0;
}
#burger.open span {
background-color: #2C9FD1;
}
#media (min-width: 44em) {
header {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
box-shadow: 0px 0.25em 0.2em -0.2em rgba(61,61,61,0.37);
z-index: 1;
}
nav {
max-width: 95rem;
display: block;
margin: 0 auto;
}
#burger {
display: none;
}
#logo {
float: right;
padding: 0.5rem 0;
margin-right: 2rem;
margin-top: 0.2rem;
}
#nav {
padding: 0.5rem 0;
transition: none;
top: 0 !important;
position: static;
display: inline-block;
width: 70%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-left: 3rem;
margin-top: 1.4rem;
padding: 0;
}
#nav li {
border-bottom: 0;
margin-right: 2.5rem;
font-size: 1.1rem;
transition: all 0.1s ease-in-out;
display: inline-block;
position: relative;
padding: 0.3rem 0;
}
#nav li {
display: inline;
}
#nav li:active {
background-color: #ffffff;
}
#nav li:hover a, #nav li:active a{
opacity:0.5;
}
#bg_fix {
transition: none;
padding: 0;
display: inline;
position: static;
}
#logo {
margin-top: 0.1rem;
padding: 0.7rem 0;
}
#logo img {
height: 2.3rem;
}
}
JS:
var burger = document.getElementById("burger");
var nav = document.getElementById("nav");
var navLinks = document.getElementsByClassName("nav_link");
var bgFix = document.getElementById("bg_fix");
var logo = document.getElementById("logo");
burger.onclick = function() {
burger.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
if (nav.style.top === "-15rem") {
nav.style.top = "3rem";
} else {
nav.style.top = "-15rem";
}
}
function markSelection() {
burger.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
nav.style.top = "-15rem";
}
for (i = 0, len=navLinks.length; i < len; i++) {
navLinks[i].onclick = markSelection;
}
fiddle: https://jsfiddle.net/gu0j8r57/
It is hard to see here because there is only one page but you can definetely see the menu appear on the page above the menu and it's driving me crazy, you can see the weird animation when it switches to mobile view tho.
Edit: updated jsfiddle so you can see the menu appear above it on mobile view
You need to mark #nav has open. The transition: all 0.7s ease-in-out; should only happen on #nav.open
JS: (jsFiddler)
var burger = document.getElementById("burger");
var nav = document.getElementById("nav");
var navLinks = document.getElementsByClassName("nav_link");
var bgFix = document.getElementById("bg_fix");
var logo = document.getElementById("logo");
burger.onclick = function() {
burger.classList.toggle("open");
nav.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
if (nav.style.top === "-15rem") {
nav.style.top = "3rem";
} else {
nav.style.top = "-15rem";
}
}
function markSelection() {
burger.classList.toggle("open");
nav.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
nav.style.top = "-15rem";
}
for (i = 0, len=navLinks.length; i < len; i++) {
navLinks[i].onclick = markSelection;
}
CSS:
p, h1, h2, h3, h4, li, a, button {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #3d3d3d;
}
a {
text-decoration: none;
}
.font {
font-family:'Montserrat', sans-serif;
font-size:30px;
}
header {
background-color: #ffffff;
display: inline;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:100;
}
#bg_fix {
padding: 0.5em 1em 0.5em;
display: block;
position: absolute;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 1;
transition: all 0.7s ease-in-out;
}
.shadow_on {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav {
// transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav.open {
transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav li {
cursor: pointer;
display: block;
border-bottom: 1px #E5E5E5 solid;
text-decoration: none;
text-align: center;
color: #3d3d3d;
padding: 1rem 0;
background-color: #ffffff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#nav li:last-child {
border-bottom: 0;
}
#nav li:active {
background-color: #E5E5E5;
}
#logo {
display: inline-block;
cursor: pointer;
}
#logo img {
height: 2rem;
}
#burger {
margin-top: 0.6rem;
float: right;
display: inline;
width: 1.4em;
vertical-align: middle;
-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;
}
#burger span {
display: block;
height: 0.15rem;
margin-top: 0.3rem;
width: 100%;
background-color: #3d3d3d;
opacity: 1;
left: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
#burger span:first-child {
margin-top: 0;
}
#burger.open span {
background-color: #2C9FD1;
}
#media (min-width: 44em) {
header {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
box-shadow: 0px 0.25em 0.2em -0.2em rgba(61,61,61,0.37);
z-index: 1;
}
nav {
max-width: 95rem;
display: block;
margin: 0 auto;
}
#burger {
display: none;
}
#logo {
float: right;
padding: 0.5rem 0;
margin-right: 2rem;
margin-top: 0.2rem;
}
#nav {
padding: 0.5rem 0;
transition: none;
top: 0 !important;
position: static;
display: inline-block;
width: 70%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-left: 3rem;
margin-top: 1.4rem;
padding: 0;
}
#nav li {
border-bottom: 0;
margin-right: 2.5rem;
font-size: 1.1rem;
transition: all 0.1s ease-in-out;
display: inline-block;
position: relative;
padding: 0.3rem 0;
}
#nav li {
display: inline;
}
#nav li:active {
background-color: #ffffff;
}
#nav li:hover a, #nav li:active a{
opacity:0.5;
}
#bg_fix {
transition: none;
padding: 0;
display: inline;
position: static;
}
#logo {
margin-top: 0.1rem;
padding: 0.7rem 0;
}
#logo img {
height: 2.3rem;
}
}
HTML I didn't modify your html
<header>
<nav>
<ul id="nav" style="top:-15rem;">
<li class="nav_link">HOME</li>
<li class="nav_link">ABOUT</li>
<li class="nav_link">WORK</li>
<li class="nav_link">CONTACT</li>
</ul>
<div id="bg_fix" class="shadow_on">
<a id="logo"> <span class="font">Nadia</span> <img src="images/logo.png" alt="logo"></a>
<div id="burger"> <span></span> <span></span> <span></span> </div>
</div>
</nav>
</header>

How may I stack multiple html/css buttons vertically along the center of the page?

My css is listed below, followed by the html.
I am not currently aware of a method to centralize the buttons within the below detailed "box/inner-box" s. The flex display seems to be stacking the buttons vertically (though, honestly, I am not certain as to how), but, no matter what I try, and I have tried most searchable recommendations, I cannot seem to locate the column of buttons to the centre of the page, beneath the 'my name' . Does anyone know how I might centralize the buttons or if there is a much simpler method for accomplishing a similar aesthetic? I am open to all solutions. Thank you in advance!
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>
I know you already have multiple answers. However the way you use flex is not correct. It should be added into the parent div box-inner
display:flex;
align-items:center; //align item center
flex-direction:column; //direction to column
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
display:flex;
align-items:center;
flex-direction:column;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>
Check out this code: you need to have a margin: 0 auto, and add text-align:center.
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
Simply add below CSS
.box
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
}
.box .btn {
display: block;
margin: 0 auto;
}
and modify you HTML too
<body>
<div class="box">
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</body>
this will place buttons in center of page, both horizontally and vertically.
check out this code: you need to have a margin 0 auto, and add text-align:center
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>

JQuery slideshow not working probably

I'm new to web development, I integrated this slider into my page : Slideshow source+tutorial
The slider work if I run it on any local page different to mine it runs perfectly, but on mine the following problems occur :
1-pagination + arrows don't show up
2-I cant center it
my CSS :
<style>
#font-face {
font-family: imp1;
src: url(fonts/blackchancery/BLKCHCRY.TTF);
}
* { margin: 0; outline: none; }
html {
background: #32c951 url(img/noise.png);
}
body {
padding-right: 25px;
padding-left: 25px;
padding-top: 10px;
padding-bottom: 25px;
width:1200px;
}
#header
{
position:top fixed;
padding-bottom:15px;
}
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 6px 0px 4px 0px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 0px 0px 0px #666666;
-webkit-box-shadow: 0px 0px 0px #666666;
-moz-box-shadow: 0px 0px 0px #666666;
background: #2D964D url(img/noise.png);
border: solid 1px #FFFFFF;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 3px 0px;
padding: 0px 6px 0px 12px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bolder;
font-family: helvetica;
font-style: italic;
font-size: 16px;
color: #FFFDFD;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 3px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
text-shadow: 0px 0px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #82FF4D;
color: #2A7D35;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #82FF4D !important;
color: #000000 !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul {
background: #2A7D35;
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#FFFFFF !important;
font-size:15px;
font-style:italic;
font-family:helvetica;
font-weight: bold;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
#wrapper {
background-color: rgba(255, 255, 255, 0.8); /* (R, B, G, OPACITY */
position:center;
}
#main_content {
text-align:center;
}
#footer {
position:fixed;
height:20px;
background-color:red;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
background:#FFFFFF url(img/noise.png);
text-align:center;
}
#footer_content {
width:960px;
}
#footer li {
display:inline;
}
p {
font-family:imp1;
}
#welco_mes {
font-family:imp1;
font-size:35px;
color:black;
}
</style>
I suspect the whole problem comes from my CSS; an element is causing the slideshow to behave this way.
JSFiddle link: https://jsfiddle.net/nvsp94d7/3/
Though if the js+css of the slideshow are included, the slideshow immediatly sticks to the left+all its controls never show up
Here's a fork of your fiddle, https://jsfiddle.net/68z476g2/1/, that has the pagination and the slideshow centered compared to the parent div. I had to replace the slideshow pictures because they were not provided.
What comes to pagination not showing, I suspect it is because you didn't copy pagination.png to the correct location. It is referred to by the CSS and therefore it needs to be at ../images/pagination.png compared to the location of craftyslide.css
Centering the div was just matter of adding
#slideshow {
margin: 0 auto;
}
to your CSS file

Categories