The first Click here for a Demo button of this site has text-shadhow applied to it but it doesn't show:
http://www.chineselearnonline.com/ver7
Here's the CSS:
#content .call-to-act a {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
color: #ffffff;
padding: 15px 21px;
width: auto;
height: auto;
text-align: center;
}
background: -moz-linear-gradient(
top,#e45b2d 0%,#e34e18);
background: -webkit-gradient(linear, left top, left bottom,from(#e45b2d),
to(#e34e18));
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
border: 1px solid #a04830;
-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
text-shadow: 1px 1px 1px #000;
}
and HTML:
<div class="call-to-act">
Click here for a Demo
</div>
What could be the problem?
I don't see any problem. Works for me in Chrome and Firefox. I noticed in your code an extra } maybe thats the problem (but with that the css wouldn't work at all.
P.S. You don't need the -webkit- or -moz-.
Related
I am trying to make something similar to the button showed in picture.
I tried the following:
.button {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:red;
font-family:Arial;
font-size:12px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
The above CSS3 code gave me the following:
I am not sure how to make the same button with a border that looks similar to the picture.
first of all the 4 parts of the box shadow are x offset y offset and blur and the spread I did some tweaks to your code and got this output.
.button {
box-shadow: inset 0px 0px 5px 2px #000;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color: #ededed;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
</head>
<body>
<div class="button">
quit
</div>
</body>
</html>
There's no CSS property called qlineargradient so it's been removed. The box-shadow property in the example below has 3 values which makes layers top to bottom.
button {
display: inline-block;
padding: 6px 24px;
border: 1px solid #dcdcdc;
border-radius: 6px;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color: #fff;
cursor: pointer;
}
button:hover {
box-shadow:
rgba(50, 50, 93, 0.55) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
<button>QUIT</button>
I have to buttons "YES" and "NO" as shown in below images
For YES
HTML
<div class="margin-1half-em padding-zero text-center" >
<input type="button" class="login-btn cursor-pointer padding-left-1em padding-right-1em" value="YES">
</div>
CSS
.login-btn {
border: 1px solid #999999;
padding: 0.15em 0.75em;
color: #012258;
background: #15DB00;
font-weight: bold;
font-size: 1.2vw;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #666;
-moz-box-shadow: 0px 1px 2px 0px #666;
box-shadow: 0px 1px 2px 0px #666;
font-family: FTR55;
}
For NO
HTML
<div class="margin-1half-em padding-zero text-center" >
<input type="button" class="login-btn padding-left-1em padding-right-1em" style="background-color: red; color: white;" value="NO">
</div>
CSS
.login-btn {
border: 1px solid #999999;
padding: 0.15em 0.75em;
color: #012258; // Overridden for no
background: #15DB00; // Overridden for no
font-weight: bold;
font-size: 1.2vw;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #666;
-moz-box-shadow: 0px 1px 2px 0px #666;
box-shadow: 0px 1px 2px 0px #666;
font-family: FTR55;
}
Problem: Text NO is more bold then text YES. I have no idea why this happens ?
P.S: Padding and margin classes are just for padding and margins nothing else.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm wondering if it is possible to create button looks like this:
With CSS only (no additional images).
What do you think?
Yes, it is possible using box-shadow. The example uses an anchor (a) tag but can very easily be adapted to a button also.
a {
background: beige;
border-radius: 4px;
text-decoration: none;
display: block;
padding: 4px;
width: 100px;
text-align: center;
color: black;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
}
<a href='#'>Text hover</a>
Applying on button element: (Note to use border: 0px as buttons have a default border).
.shape {
background: beige;
border-radius: 4px;
padding: 4px;
width: 100px;
text-align: center;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
border: 0px;
}
<button class='shape'>Text hover</button>
Not sure why everyone is suggesting to use box-shadow, you can do this with border-radius and a bottom border alone:
body {
background: #000;
}
button {
background: #B6B694; /* Guesswork, you can find the actual colour yourself. */
border: none;
border-bottom: 2px solid #f00;
border-radius: 5px;
display: inline-block;
font-size: 14px;
padding: 10px 14px;
text-align: left;
width: 150px;
}
<button>Text hover</button>
You should post the code what tried so far. Any way try this one.
body {
background-color: #333;
text-align: center;
padding-top: 20px;
}
button {
background: beige;
border-radius: 3px;
box-shadow: 0px 5px 0px maroon;
border: 0;
color: #333;
font-size: 17px;
padding: 10px 30px;
display: inline-block;
outline: 0;
}
button:hover {
background: #eaeab4;
box-shadow: 0px 5px 0px #4d0000;
}
button:active {
box-shadow: none;
margin-top: 5px;
}
<button type="button">Text hover</button>
From http://www.css3.info/preview/box-shadow/:
Example Q shows a shadow offset to the bottom and right by 5px, with a border-radius of 5px applied to each corner:
#Example_Q {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
}
Example R shows the same shadow with a blur distance of 5px:
#Example_R {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
.example {
moz-border-radius:20px;
webkit-border-radius:20px;
border-radius:20px;
}
You want to make sure the radius works in every browser so use this code make the radius to work in all browsers.
try it your own
border-radius:20px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
I’m trying to fit a button with a textfield so I’ve been trying different dimensions (height’s button) until they conceded. The problem is: on Chrome looks great but in Firefox they don’t fit as I expected. How can I fix it?
Thank you for your help!
Chrome:
http://imageshack.us/a/img401/5964/mlvq.png
Firefox:
http://imageshack.us/a/img707/2672/u1c.png
Code:
#textfield
width: 120px;
border: 1px solid #aaa;
border-radius: 8px 0 0 8px;
padding-top: 5px;
font: 22px Arial, Helvetica;
padding-bottom: 5px;
padding-left: 5px;
box-shadow: 0px 0px 3px #E7E7E7, 0 10px 15px #E7E7E7 inset;
outline: none;
}
#button {
border-radius: 0 8px 8px 0;
border: 1px solid #aaa;
padding-top: 5px;
margin-left: -5px;
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
box-shadow:inset 0px 1px 0px 0px #caefab;
background-color:#77d42a;
display:inline-block;
color:#306108;
font-family:arial;
font-size: 20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
padding-top: 7px;
text-shadow:0px 1px 0px #aade7c;
}
Shouldn't you specify the height for both of them ?
height: XXpx;
I would like to add a button to Galleria, allowing the visitor to be directed to another url page. i am working in Dreamweaver in code mode.
Here's a button, quite minimal. CSS3.
button.galleria {
background: none repeat scroll 0 0 #E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px 1px #F6F6F6 inset;
color: #333333;
font: bold 12px/1 "helvetica neue",helvetica,arial,sans-serif;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 150px;
}
HTML
<button class="galleria">Galleria</button>