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>
Related
How do I style a button, with a shadow, so that it looks like it is pressed in?
I tried using box-shadow: ... ;. But this didn't have any affect.
By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;
Using the :active pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}
<button>
Click me
</button>
Using the :focus pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:focus {
background: #e5e5e5;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
<button>
Click me
</button>
As an alternative to buttons, there is also a possibility to simply use checkbox with the pseudo-class :checked to toggle between states.
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 11px 21px;
border: 1px solid #ccc;
display: inline-block;
color: #202020;
border-radius: 6px;
margin: 7px;
background: #f5f5f5;
user-select: none;
}
label.label-checkbox input:checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #e5e5e5;
}
<h1>Pressed buttons with Checkbox</h1>
<label class="label-checkbox">
<input type="checkbox">
<span>Checkbox</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Styled</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>As</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Pressed</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>Buttons</span>
</label>
The best way is to nudge the button lower on the page. Using transformY would be the most straight-forward. However that can mess up the layout of other things in the page. So I think that it is better to use margin to temporarily lower the button, such as,
button {
background-color: white;
padding: 10px;
vertical-align: top;
box-shadow: 2px 1px 2px gray;
margin: 4px 10px 4px 10px;
}
button:active {
box-shadow: 0 0 0 white;
margin: 6px 10px 2px 10px;
}
<button>click me</button>
<button>click me</button>
<br>
<button>click me</button>
<button>click me</button>
As in the example, you can take away 2px from the bottom margin, and add 2px to the top margin, therefore you preserve the total size of the button.
You need vertical-align in case there are more than one button.
I think that the best way to make a button looks like it's pressed it's to make it a little darker.
button{
background-color: #03A9F4;
border: none;
padding: 15px 25px;
text-transform: uppercase;
color: white;
font-weight: 700;
border-radius: 3px;
}
button:hover, button:focus{
background-color: #0074a9;
outline: none;
}
<button>Button</button>
If you think visually about what happens when a push-button (like on an old-style stereo system) is pushed in, the button moves back. Visually, the face of the button is darker. The text on the button is inset. The border of the button is dark.
The other answers here all give part of the answer.
This visually does all of the above:
.btnPushed {
color: #efefef; //orig text color was #FFF
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 4px #222;
transform: translateY(1px); /* Add per Vince's helpful comment */
}
As you might notice, we apply the styling by adding a class.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-color: #b8860b;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button class="depressed">Button3</button>
<button>Button4</button>
To avoid the adjustment (movement) of the other buttons due to the margin change, just put each button into a fix-size div. That way the buttons move around within their divs, without affecting the other buttons inside their own divs.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
div {
display: inline-block;
width: 65px;
height: 25px;
}
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div><button>Button1</button></div>
<div><button>Button2</button></div>
<div><button class="depressed">Button3</button></div>
<div><button>Button4</button></div>
Update:
Added transform: translateY(1px), per Vince's helpful comment below.
.button{
color: white;
background-color: blue;
padding: 8px 25px;
border-radius : 7px;
}
.button:active {
box-shadow: 0 0 0 black;
margin: 3px 0 0 0 ;
}
<input type="button" class="button" value="Enter">
button{
background-color:grey;
padding:10px;
border:none;
color:white;
}
button:hover{
background-color:black;
color:white;
}
<button class"b1">button</button>
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-.
I have got tricky problem here. I'd like to vertical align my text inside a button
<button id="rock" onClick="choose(1)">Rock</button>
And here is my CSS
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button:active {
font-size: 22px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
You can check it out here http://jsfiddle.net/kA8pp/ . I want to have the text on the bottom. Thank you very much!
EDIT: I can't explain it well so here is the picture of it :)
You can use line-height to achieve your goal.
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 150px;
overflow: visible;
}
http://jsfiddle.net/kA8pp/2/
You can use flexbox (check browser support, depending on your needs).
button {
display: inline-flex;
align-items: flex-end;
}
Try padding-top:65px; in button class
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top:65px;
}
JS Fiddle Demo
Buttons Style Differently: A Variation on Styling
The <button> element behaves a bit differently from some other elements, say a <div>. If you set display: table-cell in a button, it does not affect the layout, so vertical-align will allow you to control the text position.
On the other hand, one could do the following:
<div class="button" id="rock" onClick="choose(1)">Rock</div>
and use the following CSS:
.button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 90px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
display: table-cell;
vertical-align: bottom;
text-align: center;
padding-bottom: 10px;
}
In this case, you have some control by adjusting padding and height.
If you are binding a JavaScript action to the element, it does not really matter all that much what the tag is, div or button.
This approach may some advantages in particular situations.
If you apply the above CSS to a button tag, it will not work. Good to know.
http://jsfiddle.net/audetwebdesign/QSap8/
This should work for you!
<pre>
.button{
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
width: 32px;
padding: 2px;
margin-left: 5px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
}
</pre>
I am trying to add a background image to a button (or link with the same class) which already has a background color.
Here is the jsfiddle: http://jsfiddle.net/BNvke/
The button looks great by itself, but I am trying to make it so that if I add a certain class, the padding will be adjusted and a background image will be displayed, however the image does not show. Here is the CSS/HTML:
.button {
padding: 10px;
margin-right: 8px;
margin-bottom: 10px;
font-family: Arial, Tahoma, Verdana, FreeSans, sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
display: inline-block;
white-space: nowrap;
line-height: 1em;
position: relative;
outline: none;
overflow: visible;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 1px 1px 2px 0 #CCCCCC;
-moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
-webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
}
.button_blue {
border: 1px solid #305875;
color: #FBFBFB;
background-color: #3D6E97;
}
.button_blue:hover {
color: #FBFBFB;
opacity: 0.9;
filter: alpha(opacity=90);
}
.button_about {
background-image: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
padding-left: 35px;
padding-right: 15px;
}
<p><a class="button button_blue">Without Background</a></p>
<p><a class="button button_blue button_about">With Background</a></p>
How can I get that background image to show?
see http://jsfiddle.net/BNvke/1/
just change
background-image url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
with
background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
and move up the last rule so the rule about background-color defined for .button_blue can be applied on cascade
.button {
background: url(http://i47.tinypic.com/2ni0ahd.png);
background-repeat: 3px 5px no-repeat;
}
Anyone know how to get around this problem? I'm doing some custom button styling. It looks fine in Firefox:
But it doesn't look right in Chrome 15.0.874.106:
The top border has some dark pixels in the center of the button. They only show up when the button gets to be at least a certain width.
Here's the CSS:
.mybutton, .mybutton:visited {
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
background-color: #ccc;
}
.mybutton:active {
top: 1px;
}
.mybutton:hover {
background-color: #aaa;
color: #fff;
}
I've searched for other mentions of this problem but so far haven't found anything. Anyone else encounter this before?
It appears to be this
border-bottom: 1px solid rgba(0,0,0,0.25);
that is causing the problem.
When I remove it, all is good... even with many words in the button.
Example: http://jsfiddle.net/kW3u4/2/
Tested on Chrome 15.0.874.106 on Windows