We Keep Coding

I am having a slash of headers before the animation brings them in from the side. How do I get rid of it?

I am building a website to put all my projects and resume on and I am using some animation to bring in the title elements in from the side on load as you can see in the snippet below. But when the page initially loads the title text flashes really quickly then the JavaScript loads and brings them in from the sides. Is this a preloading issue? It hasn't seemed to fix it.
Is it a matter of which order the elements/JavaScript is loaded? Or am I missing some line in my JavaScript that prevents this?
window.addEventListener('DOMContentLoaded', function () {
/* Function to bring in navbar from top staggered */
gsap.from(".btn",{duration:2,opacity:0,y:-300,stagger:0.25,});
/* Function to bring h1 in from the left */
gsap.from("h1",{duration:2.5,ease:"power2.out",x:-2000});
/* Function to bring in h2 from right */
gsap.from("h2",{duration:2.5,ease:"power2.out",x:2000});
/* Function to register gsap scroll plugin */
gsap.registerPlugin(ScrollToPlugin);
/* Function to scroll to About me when button is clicked */
document.getElementById('scroll').addEventListener('click', function clicked() {
gsap.to(window, {duration: 0.8, scrollTo:'#red' });
});
});
* {
box-sizing: border-box;
}
body {
background-color: #24305E;
height: 100vh;
}
h1 {
color: #A8D0E6;
font-display: fallback;
font-size: 15vh;
font-family: 'Noto Sans SC', sans-serif;
margin-left: 12vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.15),
-14px 14px 1px rgba(0,0,0,0.14),
-16px 16px 1px rgba(0,0,0,0.13),
-18px 18px 1px rgba(0,0,0,0.12),
-20px 20px 1px rgba(0,0,0,0.11),
-22px 22px 1px rgba(0,0,0,0.1),
-24px 24px 1px rgba(0,0,0,0.09),
-26px 26px 1px rgba(0,0,0,0.08),
-28px 28px 1px rgba(0,0,0,0.07),
-30px 30px 1px rgba(0,0,0,0.06),
-32px 32px 1px rgba(0,0,0,0.05),
-34px 34px 1px rgba(0,0,0,0.04),
-36px 36px 1px rgba(0,0,0,0.03),
-38px 38px 1px rgba(0,0,0,0.02);
}
h2 {
font-family: 'Noto Sans SC', sans-serif;
font-display: fallback;
color: #F8e9a1;
font-size: 15vh;
margin-left: 12vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.15),
-14px 14px 1px rgba(0,0,0,0.14),
-16px 16px 1px rgba(0,0,0,0.13),
-18px 18px 1px rgba(0,0,0,0.12),
-20px 20px 1px rgba(0,0,0,0.11),
-22px 22px 1px rgba(0,0,0,0.1),
-24px 24px 1px rgba(0,0,0,0.09),
-26px 26px 1px rgba(0,0,0,0.08),
-28px 28px 1px rgba(0,0,0,0.07),
-30px 30px 1px rgba(0,0,0,0.06),
-32px 32px 1px rgba(0,0,0,0.05),
-34px 34px 1px rgba(0,0,0,0.04),
-36px 36px 1px rgba(0,0,0,0.03),
-38px 38px 1px rgba(0,0,0,0.02);
}
h3 {
font-family: 'Courier Prime', monospace;
color: #f99f9f;
font-size: 3vh;
margin-left: 13vw;
margin-top: 10vh;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h4 {
font-family: 'Courier Prime', monospace;
color: #f99f9f;
font-size: 3vh;
margin-left: 13vw;
margin-top: 5vh;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h5 {
font-size: 5vh;
font-family: 'Noto Sans SC', sans-serif;
color: #f8e9a1;
padding: 20px;
margin: 5vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h5:after {
background-color: #F8E9A1;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 50%;
margin-left: 20px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
#red {
color: #f99f9f;
display: inline-block;
}
.box {
margin-top: 20vh;
width: 66vw;
height: 15vh;
margin-left: 12vw;
}
.content {
display: flex;
}
.column {
flex: 50%;
padding: 75px;
}
p {
color : #A8D0E6;
font-size: 2.75vh;
font-family: 'Courier Prime', monospace;
margin-left: 8vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
hr {
height: 1vh;
background-color: #A8D0E6;
border: none;
margin-left: 6vw;
margin-right: 6vw;
}
img {
float: left;
width: 25vw;
height: auto;
border-radius: 30px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
.imageContainer {
display: inline-block;
position: relative;
}
.imageContainer:before {
position: absolute;
top: 6%;
left: 10%;
width: 100%;
height: 100%;
border: 7px solid #F8E9A1;
content: '';
z-index: -2;
border-radius: 30px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
.btn {
font-family: 'Courier Prime', monospace;
color: #F8E9A1;
transition: transform .2s;
}
.btn:hover {
background-color: #F8E9A1;
color: #24305E;
transform: scale(1.2);
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.14),
-14px 14px 1px rgba(0,0,0,0.12),
-16px 16px 1px rgba(0,0,0,0.10),
-18px 18px 1px rgba(0,0,0,0.09),
-20px 20px 1px rgba(0,0,0,0.08),
-22px 22px 1px rgba(0,0,0,0.07),
-24px 24px 1px rgba(0,0,0,0.06),
-26px 26px 1px rgba(0,0,0,0.05),
-28px 28px 1px rgba(0,0,0,0.04),
-30px 30px 1px rgba(0,0,0,0.03),
-32px 32px 1px rgba(0,0,0,0.02),
-34px 34px 1px rgba(0,0,0,0.01);
}
.zoom {
transition: transform .2s;
}
.zoom:hover {
transform: scale(1.2);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Noto+Sans+SC:wght#700&display=swap" as="font">
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Matthew Salem | Software Engineer</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-dark" style="background-color: #24305e;">
<a class="navbar-brand" href="http://www.matthewsalem.com"> Matt Salem Logo </a>
<form class="form-inline">
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="First group"><button class="btn btn-outline-primary btn-lg" id="scroll" type="button">01. About Me</button></div>
</div>
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="Second Group"> <button class="btn btn-outline-primary btn-lg" type="button">02. Portfolio</button></div>
</div>
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="Third Group"> <button class="btn btn-outline-primary btn-lg" type="button">03. Resume</button></div>
</div>
</form>
</nav>
</div>
<h3>Hello! My name is</h3>
<div id="animate">
<h1>Matthew Salem.</h1>
</div>
<h4>I am a</h4>
<h2>Software Engineer</h2>
<h4>experienced in front end website architecture and back end application development.</h4>
<div class="box">
<h5><div id="red">01.</div> About Me</h5>
</div>
<div class="content">
<div class= "column">
<p>Hi! My name is Matt Salem. I am a software engineer based out of
New Haven, CT. Currently I am a student at the Holberton School.
I love buliding awesome software, especially any projects in the field
of web development. My goal is to build products that give the user
not only functional service or tool, but an experience that they will
remember. When I am not working on a project, you can find me
with friends out to eat, playing chess and drinking coffee downtown,
or enjoying a live show at Toad's Place or any other local venues.
</p>
</div>
<div class="column">
<div class="imageContainer">
<img src="IMG_3152 (1).jpg" alt="Headshot">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
</body>
</html>

From the docs:
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
It means your webpage will render before the callback is executed.
I would suggest to use gsap.to (https://greensock.com/docs/v3/GSAP/gsap.to()) instead. You could add your initial position in your CSS, which can then be reset by with gsap.to.

Try moving your <script src="main.js"></script> to the very bottom of the html body so that everything else runs first. I just finished adding some animations to a project...here is how I did it:
window.onload(animations());
function animations(){
const tl = gsap.timeline({defaults: {ease: "power1.out"}});
tl.to(".intro", {y: "-100%", duration: 1, delay: 1});
tl.fromTo(".intro", {opacity: 1}, {opacity: 0, duration: 1}, "-=1");
tl.fromTo(".card", {y: "100%"}, {y: "0%", duration: 1, stagger: 0.25}, "-=1");
tl.fromTo("#logo-blk", {y: "-400%", rotation: "-30"}, {y: "-100%", rotation: "0",
duration: 0.5}, "-=0.5");
}

Clickable div that redirect me to another HTML page

I would like to click on the DIV (article-column1) ("which is a rectangle")
and it should redirect me to another HTML document:
https://s3-us-west-1.amazonaws.com/example/the-example.html
Blockquote
<style>
#content1 {
width: 70%;
overflow: auto;
margin: 4% 0% 0% 23%;
padding-left: 6%;
}
#content1 div {
float: left;
width:27%;
height:20%;
background-color: #efefef;
margin: 1% 3% 2% 0%;
padding: 2% 2% 1% 2%;
text-align: center;
}
#content1 p {
color:#f91d04;
}
.article-column1 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column2 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column3{
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column4 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
</style>
<body>
<div id="content1">
<div class="article-column1">
<img src ="https://s3-us-west-1.amazonaws.com/plus32med.png">
<p>New Workout</a></p>
</div>
<div class="article-column2">
<img src = "https://s3-us-west-1.amazonaws.com/clock61.png">
<p>History</p>
</div>
<div class="article-column3">
<img src = "https://s3-us-west-1.amazonaws.com/money57.png">
<p>Graph</p>
</div>
<div class="article-column4">
<img src = "https://s3-us-west-1.amazonaws.com/play11.png">
<p>video</p>
</div>
</div>
</body>
Blockquote

<div onclick="window.location.href = 'http://example.com';">Click this div to get redirected.</div>

in HTML5 you can wrap your <div> inside an anchor element.
SEO-wise is always better to use an Anchor tag instead of JavaScript onclick handlers:
<a href="page.html">
<div>Yey I'm clickable</div>
</a>
PS: make sure to not have other anchor or action button elements within the wrapping <a>.

Manipulate window.location.href on element click:
document.querySelector('.article-column1').addEventListener('click', function(e) {
window.location.href = 'http://example.com';
}, false);

use this
<a class="article-column1" href="****link****">
<img src ="https://s3-us-west-1.amazonaws.com/plus32med.png">
</a>
and CSS
.article-column1 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display : block;
}

Here's what I have done:
Wrap the img and p with a
Set the a to display: block to fill up the width
Remove the bottom margin from p
Add that margin as padding of a to improve clickability.
http://jsfiddle.net/rubpdb7d/
(CSS I added are at the top)

Horizontal navigation menu - how to increase size of <li> on hover

I'm working on a navigation menu. I'm trying to achieve something like that the one on this website: www.fizjoterapia-domkrakow.pl/
I've been searching a lot and I couldn't find a way to increase the size of the when hovering over it. I'm using jquery(mouseover) to add new class to that would have a greater size.
Also, there is a ribbon shadow effect on the hovered element that I have no idea how to implement it.
The other problem I have is the opacity of the elements inside the header. I keep the logo inside one div and menu inside the other one. Both of them are in the that has a background set to opacity:0.9. Unfortunately my logo and menu are also set to such value. Any ideas how to get rid of it?
Here is the code sample.
<script>
$(function () {
$("#about2 li").mouseover(function () {
$(this).addClass("liOnHover")
});
$("#about2 li").mouseleave(function () {
$(this).removeClass("liOnHover")
});
})
</script>
</head>
<body>
<header>
<div id="logo">
<img src="~/Content/Images/logo.png" />
</div>
<div id="menuItems">
<ul id="about2">
<li id="contact">#Html.ActionLink("Home", "Home", "Home")</li>
<li id="about">#Html.ActionLink("About", "About", "About")</li>
<li id="priceList">#Html.ActionLink("PriceList", "PriceList", "Home")</li>
<li id="reviews">#Html.ActionLink("Reviews", "Reviews", "Home")</li>
</ul>
</div>
</header>
<section id="main">
CSS:
header {
height: 200px;
opacity: 0.9;
background: #527F9D;
box-shadow: 1px 1px 2px black;
}
#logo
{
padding: 30px 0 20px 70px;
float: left;
}
#main
{
margin:20px 210px 20px 210px;
background-color: #ffffff;
border-radius: 4px;
}
.liOnHover
{
background-Color:#0099FF;
color: white;
min-height: 100px;
-webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
-moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
text-align: center;
display:inline-block
}
#menuItems {
width: 900px;
height: 36px;
position: absolute;
bottom:18px;
right:20px;
top:150px;
left:350px;
font-size: 23px;
font-family: Enriqueta-Bold;
font-weight: bold;
text-align: center;
background-color: #86ADED;
-webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
-moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
}
#menuItems ul {
padding: 2px 0;
margin: 0;
}
#menuItems li {
display: inline;
padding: 4px;
}

Instead of using Javascript to achieve this you could simply use the :hover attribute in CSS
#menuItems li {
display: inline;
padding: 4px;
}
#menuItems li:hover {
background-Color:#0099FF;
color: white;
min-height: 100px;
-webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
-moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
text-align: center;
display:inline-block
}
regarding your second issue, opacity is always influencing the children of the element, if you just want to use a transparent background you could set the color using background-color: rgba(82,127,157,.9)

You need to use the selector #menuItems li.liOnHover or #menuItems li:hover for the hover changes to work.
Additionally, you should set the display of #menuItems li to inline-block.
Hope this helps.

toggling a link's activity on click using javascript

I have a question similar to this question Making a link stay active displaying hover effect upon click using javascript i just wanted to disable the active class when the link is clicked again any help would be appreciated
JSFiddle
HTML
<div id="profile_list">
<h2>Members: 37</h2>
• O.F.
• Founder
• Leader
• Sr. Admin
• Jr. Admin
• Full-Member
• Greenhorn
• Inactive
• Legend
</div>
JS
$('#profile_list a').click(function() {
var a = $(this);
$('#profile_list a').removeClass('active');
$(this).addClass('active');
});
CSS
#profile_list {
width: 250px;
height: 328px;
background-color: #333;
background-image: -moz-linear-gradient(#777, #222);
background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#222));
background-image: -webkit-linear-gradient(#777, #222);
background-image: -o-linear-gradient(#777, #222);
background-image: -ms-linear-gradient(#777, #222);
background-image: linear-gradient(#777, #222);
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
float: left;
position: relative;
top: 20px;
left: 20px;
z-index: 2;
}
#profile_list h2 {
width: 226px;
height: 20px;
padding: 10px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #B45F04;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}
#profile_list a {
width: 218px;
height: 20px;
padding: 4px 12px 7px 20px;
color: #A4A4A4;
float: left;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
top: 5px;
}
#profile_list a:hover, #profile_list a.active {
background: rgba(204, 204, 204, 0.5);
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
color: #FFF;
}

Then do two checks, one to see if the clicked anchor is active already and another to see if any of that anchors siblings are active.
If it's already active, "deactive" it by removing the class.
If one of its siblings is active during the click, don't activate it.
If neither it nor its siblings are active, activate it.
JS
// Add a click listener to the anchors of profile_list
$('#profile_list a').click(function () {
// Set variables for this,
// Whether I am the active one,
// And if there are other active elements in this list
var a = $(this),
amIactive = a.hasClass('active'),
areOthersActive = a.parent().children().hasClass('active');
// If I'm active
if (amIactive) {
// Make me not active when I'm clicked
a.removeClass('active');
}
// Otherwise, if none of my siblings are active
else if(!areOthersActive){
// Make me active
a.addClass('active');
}
});
Forked fiddle with changes: jsfiddle

How can i style a button from zero. Get rid of the button theme?

I want to get rid of the button basic Theme and make the button styleable as an a tag.
I want get rid of all of the ugly gray square in the button and substitute it with nothing as a link.
If you want to see my buttons, visit my website: "http://www.soundbust.com"
Here is my css code:
.button {
padding: 10px 25px;
-webkit-box-shadow: 0px 4px 0px #c8c8c8;
-moz-box-shadow: 0px 4px 0px #c8c8c8;
box-shadow: 0px 4px 0px #c8c8c8;
border-radius: 6px;
font-family: 'Questrial', sans-serif;
font-family: 12px;
color: #e4e4e4; /*#e4e4e4*/
text-decoration: none;
display: inline;
margin: 6px 0px;
background-color: #5a5a5a;
}
.button:hover {
background-color: #676767;
color: #d0d0d0 ;
-webkit-box-shadow: 0px 4px 0px #bababa;
-moz-box-shadow: 0px 4px 0px #bababa;
box-shadow: 0px 4px 0px #bababa;
}

This could be a great learning experience:
Take a look at how Bootstrap resets button-tags, especially for the "link" type. You can right-click on the link button and choose "Inspect Element..." to see its CSS styles.
It's late now so I'll post some actual code tomorrow if you haven't already figured it out by then :)