This social media footer downloaded from codepen working perfect on its own. When applied on jQuery page hover effect is not working at all.
Below you can view my code, I wish to make hover property of social buttons to become visible again. !important; property found in other posts here also not working.
$(function() {
$("button").hover(function() {
$(".content").removeClass("active");
$("#" + $(this).data("bind")).addClass("active");
});
});
.p{
text-align: center;
line-height: 100px;
}
.content {
opacity: 0;
position: absolute;
-webkit-transition: 0.3s all linear;
width: 100%;
height: 100%;
left: 0;
top: -2px;
}
.content.active {
opacity: 1;
}
#content1 {
background-image: url(file:///C|/Users/kaf/Desktop/My%20ultimate%20site/38e23136-b943-4487-930c-f4d7a50fccce.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.button {
background:none;
border:none;
padding:0;
font-size:24px;
color:#FFF;
margin: 10px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.footer {
padding: 20px 0;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow:hidden;
}
.social {
display: inline-block;
width: 70px;
height: 70px;
margin: 0 10px;
line-height: 70px;
font-family: Entypo;
font-size: 35px;
text-align: center;
color: #999;
border-radius: 50%;
background: #eee;
overflow: hidden;
transition: color .3s;}
.social:hover {
color: #000 !important;
cursor:pointer;
}
.social {
box-shadow: rgb(210, 210, 210) 1px 1px,
rgb(210, 210, 210) 2px 2px,
rgb(211, 211, 211) 3px 3px,
rgb(211, 211, 211) 4px 4px,
rgb(211, 211, 211) 5px 5px,
rgb(212, 212, 212) 6px 6px,
rgb(212, 212, 212) 7px 7px,
rgb(212, 212, 212) 8px 8px,
rgb(213, 213, 213) 9px 9px,
rgb(213, 213, 213) 10px 10px,
rgb(214, 214, 214) 11px 11px,
rgb(214, 214, 214) 12px 12px,
rgb(214, 214, 214) 13px 13px,
rgb(215, 215, 215) 14px 14px,
rgb(215, 215, 215) 15px 15px,
rgb(215, 215, 215) 16px 16px,
rgb(216, 216, 216) 17px 17px,
rgb(216, 216, 216) 18px 18px,
rgb(216, 216, 216) 19px 19px,
rgb(217, 217, 217) 20px 20px,
rgb(217, 217, 217) 21px 21px,
rgb(218, 218, 218) 22px 22px,
rgb(218, 218, 218) 23px 23px,
rgb(218, 218, 218) 24px 24px,
rgb(219, 219, 219) 25px 25px,
rgb(219, 219, 219) 26px 26px,
rgb(219, 219, 219) 27px 27px,
rgb(220, 220, 220) 28px 28px,
rgb(220, 220, 220) 29px 29px,
rgb(221, 221, 221) 30px 30px;
text-shadow: rgb(226, 226, 226) 1px 1px,
rgb(227, 227, 227) 2px 2px,
rgb(227, 227, 227) 3px 3px,
rgb(228, 228, 228) 4px 4px,
rgb(229, 229, 229) 5px 5px,
rgb(229, 229, 229) 6px 6px,
rgb(230, 230, 230) 7px 7px,
rgb(230, 230, 230) 8px 8px,
rgb(231, 231, 231) 9px 9px,
rgb(232, 232, 232) 10px 10px,
rgb(232, 232, 232) 11px 11px,
rgb(233, 233, 233) 12px 12px,
rgb(233, 233, 233) 13px 13px,
rgb(234, 234, 234) 14px 14px,
rgb(235, 235, 235) 15px 15px,
rgb(235, 235, 235) 16px 16px,
rgb(236, 236, 236) 17px 17px,
rgb(236, 236, 236) 18px 18px,
rgb(237, 237, 237) 19px 19px,
rgb(238, 238, 238) 20px 20px;
}
html >
<head>
<meta charset="utf-8">
<title>Alfandari&co</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Lato:300');
#import url('http://weloveiconfonts.com/api/?family=entypo');
</style>
<body>
<div id="content1" class="content active">
<div class="container" align="center">
<button class="button buttonx" data-bind="content1">OUR COMPANY</button>
<button class="button buttonx" data-bind="content2">OUR HISTORY</button>
<button class="button buttonx" data-bind="content3">UNIQUE PIECES</button>
<button class="button buttonx" data-bind="content4">JEWELRY</button>
<button class="button buttonx" data-bind="content5">CONTACT US</button>
</div>
<p>Page 1</p>
<div class="footer">
<div class="social"></div>
<div class="social"></div>
<div class="social">🎬</div>
<div class="social">📷</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Just used this code:
$(function() {
$("button").hover(function() {
$(".content").toggleClass("active");
});
});
Related
I want to decrease the font size of first div and increase the font size of the second div.
top1 {
transform: translateX(-7em);
font-size: 1.2em !important ;}
#txt{
margin: 10px;
border-radius: 9px;
backdrop-filter: blur(8 px) saturate(171%);
-webkit-backdrop-filter: blur(5px) saturate(171%);
border: 1px solid ;
border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
-webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
background:rgba(238, 221, 221, 0.85);
padding: .5em 1em ;
color: rebeccapurple;
font-size: .7em;
}
https://codepen.io/tiwari_ashuism/pen/WNOjbgO
Both div elements have the same id="txt" and this id has a font-size of 0.7em which you need to delete. Use the classes to apply different font-size for each div class.
#txt{
margin: 10px;
border-radius: 9px;
backdrop-filter: blur(8 px) saturate(171%);
-webkit-backdrop-filter: blur(5px) saturate(171%);
border: 1px solid ;
border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
-webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
background:rgba(238, 221, 221, 0.85);
padding: .5em 1em ;
color: rebeccapurple;
}
.top1 {
transform: translateX(-7em);
font-size: 1.5em !important ;
}
.top2 {
transform: translateX(7em);
font-size: 1.1em !important;
}
I'm having some trouble with this wedding website I'm making for school. The problem being that the center decoration piece witch will eventually be a logo, doesn't align with the top of the page when the screen size is changed. On the screen I'm working on it looks fine, but on other screens it gets messed up.
Screen I'm working on. Looks fine.
Friend's Screen is moved down or on other screens is cut off.
I have tried everything from changing the position type and the display type, trying to set margins. To even setting it fixed and then positioning it where I want it, but always ends up messing something else up. The nav bar is fixed at the top of the screen and the surrounding links are aligned to it. I can't seem to solve it and am wondering if anyone has any solutions.
Here is a link to the download for the website:Website
#import url('http://weloveiconfonts.com/api/?family=entypo');
html{
background-image: url("background.jpg");
background-size:cover;
background-position:0px 60px;
background-attachment: fixed;
padding:0px;
}
body{
margin:0;
}
nav{
background-color: snow;
text-align: center;
position: fixed;
width:100%;
margin:0;
z-index: 100;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
section{
padding-bottom: 20px;
text-align: center;
position: relative;
top: 60px;
background-color: dimgrey;
z-index:50;
margin-left:15%;
margin-right:15%;
}
footer{
font-size: 13px;
z-index: 75;
font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
color: slategray;
margin-top:60px;
top:60px;
background-color: #ddd;;
height:60px;
margin-left:15%;
margin-right:15%;
padding: 20px;
-webkit-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
}
nav ul{
text-align: center;
list-style:none;
margin: 0;
padding: 0;
}
nav ul li{
text-align: center;
display: inline;
margin:0px;
}
nav ul li a{
margin-left:-2px;
margin-right:-2px;
color: slategray;
display: inline-block;
text-decoration: none;
font-size:25px;
font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
padding: 7px;
text-align:center;
padding-left: 10px;
padding-right:10px;
padding-top:15px;
padding-bottom:15px;
height: 10%;
width:9%;
-webkit-transition: background-color 0.2s;
}
nav ul li a:hover{
background-color:#d9d9d9;
}
nav ul li a:active{
background-color:#d9d9d9;
}
nav ul li img{
z-index: -20;
align-content: center;
position: relative;
top: 75px;
background-color: snow;
width:20%;
height:100%;
margin-left: 15px;
margin-right:15px;
margin-top:-210px;
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:5px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.wedding{
width:100%;
margin-bottom: 5px;
}
h1{
background-color: snow;
font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
margin-bottom:25px;
padding:10px;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.footer-info{
margin: 0;
list-style:none;
text-decoration: none;
float: left;
}
.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
margin: 0;
padding: 0;
border: none;
border-spacing: 0;
}
/* Calendar Wrapper */
.ui-datepicker {
display: none;
width: 294px;
padding: 35px;
cursor: default;
margin-left:20px;
text-transform: uppercase;
font-family: Tahoma;
font-size: 12px;
background: snow;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
}
/* Calendar Header */
.ui-datepicker-header {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #d6d6d6;
}
.ui-datepicker-title { text-align: center; }
/* Month */
.ui-datepicker-month {
position: relative;
padding-right: 15px;
color: #565656;
}
.ui-datepicker-month:before {
display: block;
position: absolute;
top: 5px;
right: 0;
width: 5px;
height: 5px;
content: '';
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Year */
.ui-datepicker-year {
padding-left: 8px;
color: #a8a8a8;
}
/* Prev Next Month */
.ui-datepicker-prev,
.ui-datepicker-next {
position: absolute;
top: -2px;
padding: 5px;
cursor: pointer;
}
.ui-datepicker-prev {
left: 0;
padding-left: 0;
}
.ui-datepicker-next {
right: 0;
padding-right: 0;
}
.ui-datepicker-prev span,
.ui-datepicker-next span{
display: block;
width: 5px;
height: 10px;
text-indent: -9999px;
background-image: url(../img/arrows.png);
}
.ui-datepicker-prev span { background-position: 0px 0px; }
.ui-datepicker-next span { background-position: -5px 0px; }
.ui-datepicker-prev-hover span { background-position: 0px -10px; }
.ui-datepicker-next-hover span { background-position: -5px -10px; }
/* Calendar "Days" */
.ui-datepicker-calendar th {
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
font-weight: normal;
color: #a8a8a8;
}
.ui-datepicker-calendar td {
padding: 0 7px;
text-align: center;
line-height: 26px;
}
.ui-datepicker-calendar .ui-state-default {
display: block;
width: 26px;
outline: none;
text-decoration: none;
color: #a8a8a8;
border: 1px solid transparent;
}
/* Day Active State*/
.ui-datepicker-calendar .ui-state-active {
color: #6a9113;
border-color: #6a9113;
}
/* Other Months Days*/
.ui-datepicker-other-month .ui-state-default { color: #565656; }
.social {
display: inline-block;
width: 50px;
height: 50px;
margin: 0 10px;
line-height: 50px;
font-family: Entypo;
font-size: 28px;
text-align: center;
color: #555;
border-radius: 10px;
background: #eee;
overflow: hidden;
cursor: pointer;
text-decoration: none;
}
.wrapper {
float: right;
text-align: center;
}
.social {
box-shadow: rgb(210, 210, 210) 1px 1px,
rgb(210, 210, 210) 2px 2px,
rgb(211, 211, 211) 3px 3px,
rgb(211, 211, 211) 4px 4px,
rgb(211, 211, 211) 5px 5px,
rgb(212, 212, 212) 6px 6px,
rgb(212, 212, 212) 7px 7px,
rgb(212, 212, 212) 8px 8px,
rgb(213, 213, 213) 9px 9px,
rgb(213, 213, 213) 10px 10px,
rgb(214, 214, 214) 11px 11px,
rgb(214, 214, 214) 12px 12px,
rgb(214, 214, 214) 13px 13px,
rgb(215, 215, 215) 14px 14px,
rgb(215, 215, 215) 15px 15px,
rgb(215, 215, 215) 16px 16px,
rgb(216, 216, 216) 17px 17px,
rgb(216, 216, 216) 18px 18px,
rgb(216, 216, 216) 19px 19px,
rgb(217, 217, 217) 20px 20px,
rgb(217, 217, 217) 21px 21px,
rgb(218, 218, 218) 22px 22px,
rgb(218, 218, 218) 23px 23px,
rgb(218, 218, 218) 24px 24px,
rgb(219, 219, 219) 25px 25px,
rgb(219, 219, 219) 26px 26px,
rgb(219, 219, 219) 27px 27px,
rgb(220, 220, 220) 28px 28px,
rgb(220, 220, 220) 29px 29px,
rgb(221, 221, 221) 30px 30px;
text-shadow: rgb(226, 226, 226) 1px 1px,
rgb(227, 227, 227) 2px 2px,
rgb(227, 227, 227) 3px 3px,
rgb(228, 228, 228) 4px 4px,
rgb(229, 229, 229) 5px 5px,
rgb(229, 229, 229) 6px 6px,
rgb(230, 230, 230) 7px 7px,
rgb(230, 230, 230) 8px 8px,
rgb(231, 231, 231) 9px 9px,
rgb(232, 232, 232) 10px 10px,
rgb(232, 232, 232) 11px 11px,
rgb(233, 233, 233) 12px 12px,
rgb(233, 233, 233) 13px 13px,
rgb(234, 234, 234) 14px 14px,
rgb(235, 235, 235) 15px 15px,
rgb(235, 235, 235) 16px 16px,
rgb(236, 236, 236) 17px 17px,
rgb(236, 236, 236) 18px 18px,
rgb(237, 237, 237) 19px 19px,
rgb(238, 238, 238) 20px 20px;
}
<!doctype html>
<html lang="en-US">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li><img src="img/hearts.png"></li>
<li>Reservations</li>
<li>Menue</li>
<li>Contact</li>
</ul>
</nav>
<section>
<img src="img/wedding.jpg" class="wedding">
</section>
<footer>
<ul class="footer-info">
<li> <p>Made by Taylor Bastian and Danial Andales for FBLA competition</p> </li>
<li><p>Copyright © 2015. SampleCorp</p></li>
</ul>
<div class="wrapper">
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
</div>
</footer>
</body>
</html>
Try using "em" instead of pixels. pixel's are the same size on every screen and so they do not adjust to your screen, however, "em"s will be the same relative size on all screens, meaning that it will adjust to your screen. Hope this helped, I'm a newbie too. :P
This is a common problem with spaces, margin, padding sizes, in a large browser everything will works fine but in a small browser like width 1024px, the elements will move because they don't have enough space.
Change some css in
nav ul li img change top:-13px
It fix your example, if not, use media query, to large browser maybe is top:0 for smaller browser use the accurate top:xx,
have fun.
I have tricky questions, I receive email with some HTML code in it which generates some CSS objects. Objects might have different sizes. I want to transform these objects to png image.
I cannot use canvas2html, because it doesn't support all CSS. Currently I am opening email, making a printscreen and saving it manually but this is not the way to go. I wonder if you have any idea how to automate it.
Currently I busy with scripting it in the way:
Receive email
Save css object as html file
Open file in browser
Make print screen of entire screen using powershell
Save it to file
Using Photoshop actions crop the file
I believe that should work (although I still have some gaps in it like how to automate saving CSS to html file), but I am pretty sure that there must be better way to do that.
Sample code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i id="icon" class="fa fa-linkedin-square" style="text-shadow: rgb(48, 117, 165) 0px 0px 0px, rgb(48, 118, 167) 1px 1px 0px, rgb(49, 120, 169) 2px 2px 0px, rgb(49, 121, 171) 3px 3px 0px, rgb(50, 123, 173) 4px 4px 0px, rgb(51, 124, 175) 5px 5px 0px, rgb(51, 125, 177) 6px 6px 0px, rgb(52, 127, 179) 7px 7px 0px, rgb(52, 128, 181) 8px 8px 0px, rgb(53, 130, 183) 9px 9px 0px, rgb(53, 131, 185) 10px 10px 0px, rgb(54, 133, 187) 11px 11px 0px, rgb(55, 134, 189) 12px 12px 0px, rgb(55, 136, 191) 13px 13px 0px, rgb(56, 137, 193) 14px 14px 0px, rgb(56, 138, 195) 15px 15px 0px, rgb(57, 140, 197) 16px 16px 0px, rgb(58, 141, 199) 17px 17px 0px, rgb(58, 143, 201) 18px 18px 0px, rgb(59, 144, 203) 19px 19px 0px, rgb(59, 146, 205) 20px 20px 0px, rgb(60, 147, 207) 21px 21px 0px, rgb(60, 148, 209) 22px 22px 0px, rgb(61, 150, 211) 23px 23px 0px, rgb(62, 151, 213) 24px 24px 0px, rgb(62, 153, 215) 25px 25px 0px, rgb(63, 154, 217) 26px 26px 0px, rgb(63, 156, 219) 27px 27px 0px, rgb(64, 157, 221) 28px 28px 0px, rgb(65, 158, 223) 29px 29px 0px, rgb(65, 160, 225) 30px 30px 0px, rgb(66, 161, 227) 31px 31px 0px, rgb(66, 163, 229) 32px 32px 0px, rgb(67, 164, 231) 33px 33px 0px, rgb(67, 166, 233) 34px 34px 0px; font-size: 151px; color: rgb(255, 255, 255); height: 236px; width: 236px; line-height: 236px; border-radius: 41%; text-align: center; background-color: rgb(68, 167, 235);"></i>
</body></html>
Quite the project you have. The Photoshop cropping could be automated by using the library provided by this blog:
http://blogs.msdn.com/b/powershell/archive/2009/03/31/image-manipulation-in-powershell.aspx
I would give it a good read and have a look at the crop script. You would need to work out where in your print screen you wanted to crop from. You could then crop the size of the image by taking the height and width from your markup.
Hopefully that gives you a starting point.
I am trying to create an aqua themed button that looks great across multiple browsers. I am new to CSS, so please be kind.
I have found an example on-line that looks great in Chrome... But does not show up in IE...
Below is the button in chrome...
HTML:
<div class="button aqua">
<div class="glare"></div>
Button Label
</div>
CSS:
.button{
width: 120px;
height: 24px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
position: relative;
/* Label */
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}
.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}
You are missing css attributes for IE browser.
ADD the following. SAMPLE BELOW.
JSFIDDLE
border-radius:8px;
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
Internet Explorer does not recognize -webkit or -moz browser prefixes. Everywhere you see those, also add the same attribute without the prefix.
For example:
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
Add:
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
And, just FYI, -webkit is for Chrome/Safari and -moz is for Firefox.
I have a that has been styled in CSS to look like a button. The problem I'm having though is that the button MUST be 185px wide and 75px high. Which I get right, but the text of the button is floating somewhere on top to the left.
How do I get the text to display exactly in the middle of the button? I've created a JSfiddle so you guys can check it out.
//Ignore this comment.
Change height to line-height and add text-align:center
.button-large{
text-decoration: none;
display: inline-block;
text-align:center;
width: 185px;
line-height: 75px;
font-family: sans-serif;
color: rgb(116, 79, 145);
font-size: 24px;
padding: 10px;
text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.6);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgb(156, 125, 185);
background: -moz-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
background: -webkit-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
background: -o-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
background: -ms-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
background: linear-gradient(0deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
-webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
}
DEMO