I have a button which takes the user to another page. I could just use a link but I want it to look like a button. It works fine in everything except IE7 and IE8 but I have no idea why?
<div id="print_version">
<a href="report_print.php?audit=<? echo $audit_id; ?>" target="_blank">
<input type="button"value="Print Report"></a>
</div>
Get rid of the input and use a styled <a> tag.
HTML
<div id="print_version">
<a class="btn" href="report_print.php?audit=<?php echo $audit_id; ?>" target="_blank">Print Report</a>
</div>
CSS
.btn {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #F5F5F5;
background-image: -moz-linear-gradient(center top , #FFFFFF, #E6E6E6);
background-repeat: repeat-x;
border-color: #E6E6E6 #E6E6E6 #A2A2A2;
border-image: none;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #333333;
cursor: pointer;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
padding: 4px 14px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
}
CSS is compliments of twitter bootstrap. http://twitter.github.com/bootstrap/
Related
I have a button which I have put two icons, one grey and one blue. I have hidden the blue image by add display: none; and when I hover over the button I change the css to display: block;. The blue image shows but is not directly over the grey image.
.page-btn-icon {
vertical-align: middle;
width: 36px;
height: 36px;
margin: 0 4px;
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 18px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
outline: 0 none !important;
}
.page-btn-icon .icon {
width: 16px;
height: 16px;
}
.page-btn-icon .img-top {
display: none;
}
.page-btn-icon:hover .img-top {
display: block;
}
<button class="page-btn-icon">
<!--<img class="icon" src="{% static 'img/icons/filter_g.png' %}">
<img class="icon img-top" src="{% static 'img/icons/filter_b.png' %}">-->
<img class="icon" src="https://dummyimage.com/16x16/fff/aaa">
<img class="icon img-top" src="https://dummyimage.com/16x16/aaa/fff">
</button>
Screenshot:
This fixes the problem by making it so the first image is display:none when hovered, and the second image is changed from display:none to display:inline-block.
.page-btn-icon {
vertical-align: middle;
width: 36px;
height: 36px;
margin: 0 4px;
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 18px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
outline: 0 none !important;
}
.page-btn-icon .icon {
width: 16px;
height: 16px;
}
.page-btn-icon .img-top,
.page-btn-icon:hover .icon {
display: none;
}
.page-btn-icon:hover .img-top {
display: inline-block;
}
<button class="page-btn-icon">
<img class="icon" src="https://dummyimage.com/16x16/fff/aaa">
<img class="icon img-top" src="https://dummyimage.com/16x16/aaa/fff">
</button>
I would get rid of the two images, and just flip the background image of the button based on the hover state. Much cleaner.
.page-btn-icon {
vertical-align: middle;
width: 36px;
height: 36px;
margin: 0 4px;
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 18px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
outline: 0 none !important;
background-image: url('https://dummyimage.com/16x16/fff/aaa');
background-position: center center;
background-repeat: no-repeat;
}
.page-btn-icon:hover {
background-image: url('https://dummyimage.com/16x16/aaa/fff');
}
<button class="page-btn-icon">
</button>
How do i make my checkboxes transparant? It does work with text fields and buttons but it doesnt seem to work with checkboxes.
This is the form of my code.
#checkbox {
width: 20px;
height: 20px;
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.08);
}
<div class="checkbox check-transparent">
<label>
<input type="checkbox" id="checkbox">Onthoud mij
</label>
</div>
The only thing that can be done for a regular checkbox is making it transparent by decreasing its opacity but it also lightens the tick mark inside if checked. A workaround is, having the checkbox wrapped in a div and changing the color of the checkbox when checked like shown in the snippet below:
#checkb {
width: 20px;
height: 20px;
cursor: pointer;
background: rgba(40,40,40,0.2);
color:black;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: relative;
left: -5px;
top: -5px;
}
#checkb:checked {
background: rgba(40,40,40,0.7);
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 100px;
height: 100px;
overflow: hidden;
}
<div class="checkbox-container">
<input type="checkbox" id="checkb"/> Input
</div>
You can also (classic method that allows to restyle a checkbox crossbrowser following standards)
take input ahead and outside the label
link the label to its input via attribute for
use a pseudo on label to draw a checkbox via css and also apply size and background.
hide the checkbox
label {
display: inline-block;
}
#checkbox {
display: none;
}
label:before {
content: '';
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.1);
/* average checkbox styling */
line-height: 1.1em;
font-weight: bold;
text-align: center;
font-size: 20px;
height: 20px;
width: 20px;
display: inline-block;
box-shadow: inset 0 0 1px 1px rgb(153, 154, 154), inset 0 0 1px 2px white, inset 0 0 1px 2px white, inset 2px 2px 1px 1px rgb(182, 187, 192), inset -1px -1px 2px 1px rgb(182, 187, 192), inset 8px 8px 4px -4px rgb(182, 187, 192);
box-sizing: border-box;
}
:checked+label:before {
content: '\2713';
color: rgb(74, 95, 151);
}
:checked+label {
color: rgb(74, 95, 151);
}
label:hover {
color: rgb(28, 50, 125);
}
label:hover:before {
box-shadow: inset 0 0 1px 1px rgb(95, 133, 156), inset 0 0 1px 2px rgb(198, 237, 252), inset 0 0 1px 2px rgb(198, 237, 252), inset 2px 2px 1px 1px rgb(134, 203, 246), inset -1px -1px 2px 1px rgb(134, 203, 246), inset 8px 8px 4px -4px rgb(134, 203, 246);
}
<div class="checkbox check-transparent">
<input type="checkbox" id="checkbox">
<label for="checkbox"> Onthoud mij
</label>
</div>
Hello I was wondering how to make spoiler text on a website with html/css. What I was is, text that is black with black background, but when hovered over, makes the black text turn white, making it visible.
like this
<span style="color: black; background: black;">test</span>
<p>Then when hovered over</p>
<span style="color: white; background: black;">test</span>
The <details> HTML tag was designed specifically for this purpose. Here is the example from the MDN docs. Unfortunately, IE and edge don't support this tag as of January 2019.
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
.spoiler, .spoiler2{
color: black;
background-color:black;
}
.spoiler:hover{
color: white;
}
.spoiler2:hover {
background-color:white;
}
<span class="spoiler" >test</span>
<p>Then when hovered over</p>
<span class="spoiler2"> other test </span>
Similar to spoiler in Disqus comments.
.spoiler{
background-color: gray;
color: transparent;
user-select: none;
}
.spoiler:hover{
background-color: inherit;
color: inherit;
}
<h3>In the movie, <span class="spoiler">the hero kills his wife.</span></h3>
I have been spoilers on forums (including my own) that are not just text with the background color changed.
They have the content hidden until you click a show/hide toggle button.
I want to add a section to a site that doesn't show up by default to save space.
https://jsfiddle.net/clarle/bY7m4/
That seems like it will meet my needs.
HTML
<div class="forum-post">
Show spoiler
Hide spoiler
<div class="spoiler">
<p class="spoiler-content">People die when they are killed!</p>
</div>
</div>
CSS
.spoiler {
display: none;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .spoiler {
display: inline;
}
/* Just for prettiness, not actually needed */
body {
margin: 0;
padding: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
.btn {
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
text-decoration: none;
}
.forum-post {
padding: 20px;
border: 1px solid #000;
}
.spoiler-content {
padding: 15px;
}
I want to add a button which looks like an image that I will assign but its type would not be "image". For example:
<input type="button" someimagetag="someimagelink" />
Not like
<input type="image" src="" />
How do I do that?
You could style it as you would with any other element, using CSS.
Look at Twitter's Bootstrap http://twitter.github.com/bootstrap/ any element that uses the 'btn' class will use these styles:
.btn {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-transition: all 0.1s linear 0s;
background-color: #E6E6E6;
background-image: -moz-linear-gradient(center top , #FFFFFF, #FFFFFF 25%, #E6E6E6);
background-repeat: no-repeat;
border-color: #CCCCCC #CCCCCC #BBBBBB;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #333333;
cursor: pointer;
display: inline-block;
font-size: 13px;
line-height: normal;
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
Keep in mind they use CSS3 declarations to style their elements but you could use a background image just as well.
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' />