I am having a very strange problem, and I'm not sure of the cause. Elements on my page are not sticking to their defined places, rather, they are 'jumping' upwards.
My current layout looks thus, with the HTML and CSS below:
HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Screening - Your movie database | Discover. Watch. Share.</title>
<meta name="description" content="Screening is a brand new take on the traditional movie database, fusing social networking and multimedia to provide a clear, concise experience allowing you to share your favourite movies, and discover new classics.">
<meta name="keywords" content="Movies, Films, Screening, Discover, Watch, Share, experience, database, movie database, film database, share film, share films, discover film, discover films, share movie, share movies, discover movie, discover movies">
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="stylesheet" href="fonts.css" type="text/css" />
</head>
<body>
<header>
<p class="logo">Screening</p>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<section id="header_search">
<form id="search" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</section>
</header>
<div id="content">
<div id="home_banner">
<h1>Discover. Watch. Share.</h1>
<h2>Screening. Your movie database.</h2>
</div>
<form id="homesearch" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</div>
<footer>
<p class="logo">Screening</p>
<nav>
<ul>
<li>Home | </li>
<li>About | </li>
<li>Privacy Policy</li>
</ul>
</nav>
<p id="copyright">©Screening 2012</p>
</footer>
</body>
</html>
CSS
/* HTML reset */
html, * {
margin: 0px;
padding: 0px;
}
/* General styling */
body {
font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 1em;
color: white;
background-color: black;
line-height: 20px;
letter-spacing: 1.5px;
}
/*Custom link styles*/
a:link {
color: white;
background-color: transparent;
text-decoration: none;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-ms-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #b70000;
background-color: transparent;
text-decoration: underline;
}
.logo a:link {
text-decoration: none;
}
.logo a:hover {
color: #b70000;
background-color: transparent;
}
/* Header styling */
header {
margin-bottom: 20px;
}
header, footer {
height: 50px;
padding-left: 50px;
padding-right: 50px;
font-size: .75em;
clear: both;
}
header nav, .logo, footer nav {
float: left;
}
header nav, footer nav, #header_search, #copyright {
margin-top: 20px;
}
header li, footer li {
display: inline;
}
#header_search {
width: 200px;
float: right;
clear: right;
}
#search input, #homesearch input {
padding: 0px 20px 0px 20px;
color: #d7d7d7;
background-color: #2d3035;
border: solid 4px #2a2e31;
}
#search input:focus, #homesearch input:focus {
outline: none;
background-color: white;
color: #6a6f75;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
#search input {
width: 80%;
height: 25px;
font-size: 1.5em;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
/* Logo styling */
.logo {
font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;
font-size: 3em;
width: 200px;
margin-right: 10px;
clear: left;
border: solid 1px red;
}
/* Content wrapper */
#content {
width: 90%;
max-width: 1500px;
margin: auto;
padding: 30px 15px 30px 15px;
clear: both;
overflow: auto;
background-color: rgba(203,203,203,0.2);
background-image: url(assets/images/bkg.png);
background-repeat: repeat;
}
/* Homepage */
#home_banner {
padding-top: 50px;
font-weight: normal;
text-align: center;
border: solid 1px red;
}
#home_banner h1 {
font-size: 5em;
clear: both;
border: solid 1px blue;
}
#home_banner h2, #search input, #homesearch input, #searchresults, #details .title {
font-family: 'RobotoThRegular', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
}
#home_banner h2 {
font-size: 1.8em;
clear: both;
border: solid 1px yellow;
}
#homesearch {
width: 480px;
margin: 80px auto 70px auto;
clear: both;
}
#homesearch input {
width: 90%;
font-size: 2em;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
I have added borders to each element I am having trouble with for clarity purposes. I had originally laid out everything correctly, however something has cocked up somewhere and I can't for the life of me figure it out; I've been struggling with this for weeks! I'm pretty sure it's something small and simple, but the solution is completely avoiding me.
Obviously, the intended result should be something like below (ignore the presentation of the search bar, this is an early mockup before the search bar was amended):
Just kill the fixed line height for the body: line-height: 20px; <-- get rid of that.
You’ve set the line-height on <body> to 20px. Any elements without a line-height (e.g. your <h1> and <h2>) will inherit this line height size, even if their font size is much bigger.
It’s usually better to set line heights relative to the font size, i.e. don’t specify a pixel unit on them.
body {
...
font-size: 1em;
line-height: 1.25;/* This makes 20px the base line height, but it’ll get bigger for lines with a bigger font size */
http://jsfiddle.net/8ZBzt/
Related
I am working on a project for school and am trying to add a drop down menu to my head navigation. I am still pretty new to css but had fun playing with the styling to get an interesting alignment that would work with the vision I had for the page (this is part of a larger piece that I didn't include to keep it relevant to the question)
I wanted to create a right aligned menu that was set to the bottom of the head div. I got everything to work by using absolute positioning but now that I am trying to add a fancy multi level drop down menu things aren't working. I have tried combinations of inline block and relative and absolute positioning but the dropdown does not align correctly. It just bunches up at the bottom offset to the right.
When I try styling the nav bar like people do in tutorials it gets messed up when I remove the absolute positioning.
Is there a way to get the dropdown to work with the current method of styling? I don't have any hover effects or visibility yet because I can't even get it lined up! That part should be pretty straight forward for the dropdown and submenus.
and probably more importantly
Is there a better way to accomplish this visual goal? (right-aligned at the bottom of the white div)
This is not a dynamic styling yet so you have to stretch the viewport for it to make sense.
/*====================================MAIN=================================*/
body {
background-color: #d5d3d5;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
margin: 0px;
padding: 0px;
}
.flex_body {
background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, 1) 20%);
display: flex;
margin: 0px;
padding: 0px;
height: 800px;
}
.page_body {
background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, 1) 15%);
margin: 0px 0px 0px 30px;
padding: 0px 0px 0px 20px;
height: 800px;
overflow: hidden;
}
/*=============================MAIN=NAVIGATION=================================*/
#header {
background-color: #ffffff;
height: 130px;
margin: 0px;
padding-bottom: 0px;
position: relative;
box-shadow: inset 0px -15px 18px -6px rgba(121, 104, 124, 0.678);
}
#headNAV ul {
list-style-type: none;
position: absolute;
text-align: right;
bottom: 0;
right: 0;
margin: 8px;
}
#headNAV ul li {
display: inline;
position: relative;
font-size: 18px;
padding: 5px 0px 15px 0px;
margin: 0px 0px 0px -5px;
}
#headNAV ul li:not(:last-child) {
border-right: 1px solid #8f85a1dc;
}
#headNAV ul li a {
display: inline-block;
padding: 5px 40px 10px 40px;
margin: 0px 0px -2px 0px;
text-decoration: none;
color: #353138;
}
#headNAV ul li a:hover {
background-color: #50328ddc;
color: white;
text-decoration: underline;
box-shadow: 0px 5px 3px 1px #50328ddc;
}
#search_icon {
max-width: 5%;
max-height: 5%;
margin: 0px;
padding: 0px;
display: inline;
}
#headNAV ul li input {
margin: 5px 35px 10px 35px;
}
/*======================myPage-Nav============================*/
#myPage_button:hover>#myPage {
color: white;
}
#myPage_button {
text-decoration: underline;
}
#myPage {
color: #50328ddc;
font-size: 22px;
font-weight: bold;
text-decoration: underline;
}
#dropdown-btn {
padding: 0px 10px;
}
#myPage-menu {
margin: auto;
}
#headNAV ul li #myPage-menu li {
position: absolute;
background-color: #fff;
display: inline-block;
padding: 0px;
border: none;
}
<header id="header">
<nav id="headNAV">
<ul>
<li>Mission</li>
<li>News</li>
<li>Events</li>
<li>Forums</li>
<li><a id='myPage_button' href="#">My<span id='myPage'>Page</span><span id = "dropdown-btn" class="fas fa-caret-down"></span></a>
<ul id="myPage-menu">
<li>Main Feed</li>
<li>Projects</li>
<li>Messages</li>
<li>Profile</li>
<li>Search</li>
</ul>
</li>
<li><input type="text" name="search" placeholder="Search..."></li>
<li><a id="header_login" href="#">Login/SignUp</a></li>
</ul>
</nav>
</header>
Thank you for any input!
Kevin
I am trying to get the social media icons to display in a line rather than stacked on top of one another. I have tried changing the display to inline rather than block but all that happens is that the icons get smaller in size but remain stacked on top of one another.
Here's the code:
html {
font-size: 100%;
/*font-size : 16px;*/
}
/*Top Header*/
.header {
background: #e7e5e4;
}
.header_left {
width: 65%;
float: left;
}
.header_right {
width: 35%;
float: right;
background: #e7e5e4;
}
.header_right li {
margin-left: 45%;
padding-top: 15px;
}
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 4.500em;
padding: 50px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.elegantshadow {
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}
.header h2 {
font-size: 24px;
font-family: 'Niconne', cursive;
color: #131313;
text-align: center;
}
#font-face {
font-family: 'si';
src: url("../socicon/socicon.eot");
src: url("../socicon/socicon.eot?#iefix") format('embedded-opentype'), url("../socicon/socicon.woff") format('woff'), url("../socicon/socicon.ttf") format('truetype'), url("../socicon/socicon.svg#icomoonregular") format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#font-face {
font-family: si;
src: url(../socicon/socicon.svg) format(svg);
}
}
.header .soc {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.header .soc li {}
.header .soc li a {
font-family: si!important;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-o-transition: .1s;
-ms-transition: .1s;
-moz-transition: .1s;
-webkit-transition: .1s;
transition: .1s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
overflow: hidden;
text-decoration: none;
text-align: center;
display: block;
position: relative;
z-index: 1;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
margin-right: 8%;
color: #ffffff;
background-color: #e7e5e4;
}
.header .soc-icon-last {
margin: 0 !important;
}
.header .soc-twitter:before {
content: 'a';
}
.header .soc-facebook:before {
content: 'b';
}
.header .soc-linkedin:before {
content: 'j';
}
.soc-email1:before {
content: '<';
}
.header .soc a:hover {
z-index: 2;
-webkit-transform: scale(1.1);
transform: scale(1.1);
background-color: #3371b7;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Skramshots Photography</title>
<meta name="author" content="Mark Stewart" />
<meta name="description" content="This site is about photography by
Mark Stewart a.k.a. Skramshots" />
<meta name="keywords" content="HTML, CSS, Javascript, jQuery,
skramshots, photography">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" type="text/css" href="css/master2.css">
<link rel="stylesheet" type="text/css" href="css/imageeffects.css">
<link rel="stylesheet" type="text/css" href="css/blogsports.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<link href="https://fonts.googleapis.com/css?
family=Niconne" rel="stylesheet">
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
</head>
<body>
<div class="header">
<ul class="soc">
<div class="header_left">
<h1 class="elegantshadow">SkramShots Photography
</h1>
<br>
<h2>Move your mouse pointer over the images</h2>
<br>
</div>
<div class="header_right">
<li>
<a class="soc-twitter" href="https://twitter.com/skramshots"></a>
</li>
<li>
<a class="soc-facebook" href="https://www.facebook.com/webpage.skramshots"></a>
</li>
<li>
<a class="soc-linkedin " href="https://www.linkedin.com/in/mark-stewart-8315443?trk=hp-identity-
name"></a>
</li>
<li>
<a class="soc-email1 soc-
icon-last btn lightbox-61896367686376 email" href="https://form.jotformeu.com/61896367686376"></a>
</li>
</div>
</ul>
<br>
</div>
</body>
</html>
I don't know how to attach the socicon.eot, svg, ttf or woff which I am using so I hope the code makes sense without them.
What I am actually doing is trying to implement a media query for mobile to have the icons display in a line but I am just trying to get it working as normal first `
First off remove margin-left: 45%; from .header_right li. That style is pushing those lis to the right, which is forcing them to stack.
You will then just need to add display:inline-block; or float:left; to .header_right li selector to make them display in a line.
This is my HTML I have 3 boxes with text in them just read the text within the first div.
html,
body {
background-position: fixed;
background-attachment: fixed;
background-size: auto;
background-color: #e2e1e0;
background-repeat: no-repeat;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
z-index: 1;
}
.header{
font-family: 'Poiret One', Arial;
color: black;
font-size: 2em;
border-radius: 10px;
border-color: black;
border-style:
}
.infodiv {
background: #fff;
border-radius: 5px;
display: inline-block;
height: 300px;
margin: 1rem;
width: 300px;
}
.statsdiv {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
font-family: 'Oswald', Arial;
}
.statsdiv:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.playerdiv {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
font-family: 'Oswald', Arial;
}
.playerdiv:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.seconddiv {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
font-family: 'Oswald', Arial;
}
.seconddiv:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<center>
<h1 class="header">Heading Placeholder</h1>
<hr>
<!--Statistic's Division-->
<div class="infodiv statsdiv">
<center>
<i class="fa fa-clock-o"></i><br><p>This first box moves the more I type, it allows me to type up to 3 lines of text but after that it becomes higher in position for example here X X X<p>
</center>
</div>
<!--Player Division-->
<div class="infodiv playerdiv">
<center>
<i class="fa fa-line-chart"></i><h2>This is a current place holder for any text that I plan on putting here in the future. Don't mind this.</h2>
</center>
</div>
<!--Informational Division-->
<div class="infodiv seconddiv">
<center>
<i class="fa fa-check-circle-o"></i><h2>This is a current place holder for any text that I plan on putting here in the future. Don't mind this.</h2>
</center>
</div>
</center>
</body>
</html>
I don't think it works well but if you could put it in a notepad real quick it should do the problem that I am having. Currently in the HTML I put 3 letter 'X's remove those 3 X's and the problem should be solved. The issue is that it is only letting me add 3 lines of text.
If you do not understand what I am still trying to say please let me know. I only took 1 class of Computer Science in high school a few years ago so it may be pretty ugly :/
Add this CSS
.infodiv {
float: left;
background: #fff;
border-radius: 5px;
display: inline-block;
height: 300px;
margin: 1rem;
width: 300px;
}
add vertical-align:top; to your .infodiv
i.e.:
.infodiv {
background: #fff;
border-radius: 5px;
display: inline-block;
height: 300px;
margin: 1rem;
width: 300px;
vertical-align:top;
}
My code: https://jsfiddle.net/k0hqzcwg/
I'm not understanding why the message button is moving outside of the parent div. I've tried clearing floats both with adding clear: both, and adding a clearfix class but have not gotten any results.
In summary, I am trying to start a competing video sharing service with Youtube, my immense skill in CSS and Html are sure to pull through and give me the one up. Sarcasm
Any tips are welcome, I know I have a lot to learn.
For those who dont want to click the link:
Html:
<body>
<div id="headingbarholder">
<div id="headingbar">
<div id="heading-submit-avatarholder">
<div id="headingmessagebutton">
<span id="messagebuttoncontent" style = text-align: middle;>Message</span>
</div>
<div id="headingavatar">
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img>
</div>
</div>
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img>
</div>
</div>
</body>
Css:
body {
color: White
font-size: 11px;
font-family: arial,sans-serif;
line-height: 15px;
background-color: #F1F1F1;
margin: 0 -8px 0 -8px;
}
#headingbarholder{
position:fixed;
left:0;
width: 100%;
}
#headingbar{
position: relative;
background-color: #fff;
padding:7px 30px 8px 30px;
border-bottom: 1px solid #E8E8E8;
}
#heading-submit-avatarholder{
float: right;
right: 0px;
width: 160px;
}
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display:inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height:normal;
}
#headingavatar{
width: 45px;
height: 45px;
display:inline-block;
}
Float the button left.
Here:
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
float: left;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display: inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height: normal;
}
I would use a button instead and float it: Fiddle
Could anyone show me some tutorials that make a button in css and doesn't require images? I googled it but everything involved images...
Thanks!
Um, define "button"? If you just want a basic button, you don't even need CSS, just use an HTML input or button tag...
<input type="button" value="Press me!" />
or
<button>Press me!</button>
If I understand you correctly, you want to make an arbitrary element look like a button?
Well ... just write CSS accordingly! Here's a kickoff example which makes a link look like a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3489881</title>
<style>
a.button {
display: inline-block;
padding: 0 2px;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>
<p><a class="button">link</a>
</body>
</html>
This one is kind of dull but gets the trick done!
h1 {
font-family: Arial;
}
a {
display: inline-block;
padding: 2 5px;
background: lightgray;
border: 5px outset lightgray;
cursor: default;
text-decoration:none;
color: black;
}
a:hover {
background: gray;
}
CSS:
.button{
background-color: #000;
color: #FF6600;
font: bolder 1.0em Tahoma;
border: 1px solid Yellow;
padding: 2px;
}
.button:hover{
border: 1px solid Red;
}
HTML:
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>
Try it: http://jsfiddle.net/eD9sf/
There are some awesome examples here - Pure CSS Buttons - of buttons that don't need any images but are legit. I think that you could add some gradients to some of them, but otherwise they looks exactly like the ones on Facebook, Twitter, Wordpress, etc. If you don't know much CSS, I'd suggest that you just copy one of those examples.
This is a very simple design, but looks pretty good
body {
font-family: Helvetica, sans-serif;
font-size: .8rem;
}
.button {
text-align: center;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
.button a {
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
}
/* Second button */
.button-link {
text-align: center;
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button-link:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
<div class="button">Click me</div><br/>
<a class="button-link" href="#">Click me, link only</a>
This one looks lovely, acording to me :)
.button {
color: rgba(255, 255, 255, 1);
background-color: rgba(61, 51, 119, 1);
font-weight: 500;
padding: 9px;
box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
width: 160px;
text-align: center;
transition: all .3s ease;
font-size: 15px;
border: none;
border-radius: 5px;
outline: none;
margin: auto;
font-family: "Century Gothic";
transform: scale(0.9);
}
.button:active {
box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
top: 6px;
transform: scale(0.9) translateY(3px);
}
<input class = 'button' type = 'button' value = 'Click' />