How can I create a button that only shows the text. Similar to an hyperlink but it has to keep the <button> properties.
Assuming you're starting with a button element:
<button class="astext">hello, world</button>
All you have to do is take away all of the default CSS styling:
.astext {
background:none;
border:none;
margin:0;
padding:0;
cursor: pointer;
}
Of course, there's no way to tell that the resulting text is actually a button. I suppose you could throw in a cursor:pointer or some :hover rules.
Maybe you're making an easter egg, maybe you don't want people to know it can be clicked.
Maybe you can check this JSFiddle code to see how it works. The suggested solution works wonder.
Html
<button class = "asText" id = "doSmth"> Hello World </button>
<div id="hiddenText">i'm well hidden</div>
CSS
.asText {
background:none;
border:none;
margin:0;
padding:0;
}
Related
I'm working on a Math website, and it has some exercises on it with solutions on the bottom of the page. I want to make so solutions are hidden when the user scrolls by them, and needs to click on the block for it to show the answer. I want to achieve this using only css and html. Here's what I have made so far:
HTML:
<div class="solution s1">
2+2=4
</div>
CSS:
.solution {
width:80%;
margin:25px auto;
}
.solution a:visited{
color:black;
background-color:white;
user-select:text;
}
.solution a{
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
color:#49FF59;
text-decoration:none;
user-select: none;
}
This code works great, except for the user-select. I want it so that the user can't copy the solution, before the block is clicked on. But the a:visited won't apply the user-select:text; I have tried to add more classes, but i wasn't able too fix it. Keep in mind most of the CSS is for asterisk.
If I'm correct, the approach you're trying to take is to prevent someone from doing a select all and seeing the solutions on screen due to the text being highlighted.
If that's the case there are better style properties to use for this, particularly visibility or display.
For example you can use visibility: hidden or display: none to hide the solution until a specific condition is met.
I'd also advise against using :visited for something like this, unless you have specific urls for each question that you plan to override (if you use href='#') for everything, then once you click one, they are all 'visited'). You're going to also have struggles with browser caches when using :visited.
As an example, you could alter your container to be the clickable element, and hide your content using visibility, then show the answer on the :active state as opposed to the :visited state. This will show the answer while the mouse button is pressed. Under normal circumstances the text isn't selectable because it's hidden. If you want to keep it shown after a click but not use :visited you'll need a javascript solution.
Worth stating that this solution will not hide answers in the source code, but as you mentioned above that is not a concern for you.
.solution {
width:80%;
margin:25px auto;
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
}
.solution:active {
color:black;
background-color:white;
user-select:text;
}
.solution:active a {
color:black;
background-color:white;
visibility:visible;
}
.solution a{
text-align:center;
text-decoration:none;
visibility: hidden;
}
<div class="solution s1">
2+2=4
</div>
I am trying to remove an underline from an href, that is wrapped in a div element. But for some reason it is not being removed.
Can anyone please help me? Below is the code.
<style>
a .menu_items {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
</head>
<body>
<div class="menu_items"> Pizza </div>
Try this:
a {
text-decoration:none;
}
Cause you are trying add text-decoration to the div with class .menu_items but not for tag a
you can do this and it will be easier after developing more pages and you will not have to create a style for each one you only have to call your style from your css
i explain you...you have to found your css default in your project or create a new one and load in your page where you want to call the styles that you will create in your css file....insert this in your css
a {
text-decoration:none;
font-size: 34px;
color:red;
}
and in your page after loading your css file you only have to copy this as you were codding
<body>
<div class="menu_items"> Pizza </div>
</body>
i hope i helped you
Please try putting the A link inside the DIV then reverse the CSS order. I believe the other way around is not valid.
just delete the selector '.menu_items' like this
<style>
a {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
<a href="#">
<div class="menu_items">
Pizza
</div>
</a>
here's the jsfiddle
The CSS property for removing the underline is
text-decoration:underline;
You will need to apply this to your anchor element.
See this here-> http://jsfiddle.net/CzDkH/
Hope this helps!!!
Place this above all your styles:
a {
text-decoration:none;
}
Get in the habit of placing all a , html , and body style properties at the top of your styles too! It will save you from headaches like this.
Happy styling :)
If you only want to do it for the class "menu_items" and not in the rest of the page, the only thing is you've got it back to front. It's like this:
.menu_items a {
text-decoration:none;
font-size: 34px;
color:red;
}
Similarly you've got the div inside the a tag, and should have the a tag inside the div
<div class="menu_items">Pizza</div>
I’m trying to create a button toggle using the twitter bootstrap.
What I’m looking to do is add a tick image at the top right of a button when the class active is added.
Here is an example of the source
http://jsfiddle.net/4GC9R/
My button css looks like
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
}
Sorry if this is a stupid question I’ve tried a few ways but I’m far from a css expert.
Thanks in Advance
To add the checkmark you could use the :after pseudo element and for an image you could then further use content: url('image_path') or background-image: url('image_path').
Also, your class selectors should be adjusted. Maybe something in this direction:
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
border:none;
position:relative;
}
.mybtn.active:after {
content: '\2713';
position:absolute;
top:0;
right:0;
}
DEMO
P.S. if you meant tick - as in the animal (e.g. Ixodes), that is also possible via content or the background property of the :after pseudo element (DEMO) ;-)
When the class name '.active' is added to the button with class '.mybtn', then the selector of the button will not be '.mybtn .active', but '.mybtn.active'.
Hope this helps.
I'm sure this is a dumb question, but I can't move this inner (button) inline style to a style sheet:
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type = 'button'
id = 'sButton2'
style = 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
The quick brown fox
</label>
I've tried this:
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type = 'button'
id = 'sButton2' >
The quick brown fox
</label>
and this:
<style type="text/css">
.sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<input type = 'button'
id = 'sButton1'
class = 'sButton' >
but neither of these works; no style is applied. Any idea what I'm doing wrong?
Thanks.
EDIT
Sorry folks, it's midnight, I (was!) just off to bed, and I screwed up the cut-and-paste. The syntax of the style sheet is actually correct - I've fixed it above. Other info:
1- the style sheet is in the head section of a single html file. There are already a couple of jQueryUI ones above it, and I copied the syntax from them;
2 - I think that there is another style applied to the buttons, but I was hoping that #sButton2 would override this;
3 - I can't get even the most trivial style from a style sheet to apply
to the buttons. If I just set the button width, for example, nothing happens, although an inline width works;
4 - it's not browser-specific - seen in F/F, Opera, Chrome;
Thanks again.
EDIT2
Just tried appending a !important to the end of the style sheet, with no change in F/F & Chrome:
...margin-right:12px; !important }
<style type="text/css">
#sButton2 { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
</style>
should be
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
</style>
You need to end the first { with a }, not a >. And the styles are not in quotes, they are simply enclosed in curly braces. You should also look into what is standard for your HTML code. Usually elements are laid out like this:
<input type="button" id="sButton2" />
It is a good idea to follow standards like this.
Change
#sButton { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
to
#sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
That should do it.
(remove the ' at the start and the end, and replace the > by a } )
your inner style ends with > instead of }
furthermore it should be in your head tag
lastly why are you wrapping your style with single quotes?
Stupid question, but are you sure the style sheet is being loaded? I've seen where people have multiple stylesheets and they're loading the wrong one, or they edited the wrong one.
You might also have an overriding style later in your stylesheet. Do you have any input styles? ID should override less specific styles, but there are bugs in some browsers that you might have to work around.
Try using !important
DOH! Yes, as others have said, your problem is the single quotes around your css attributes.
<style type="text/css">
.sButton {
cursor:pointer;
width:30px;
height:13px;
float:left;
margin-bottom:2px;
margin-right:12px
</style>
<input type="button" id="sButton1" class="sButton">
http://jsfiddle.net/charlescarver/aQHyK/
Fixed, with a lot of help from Firebug (what a great bit of software). The input tag is in a jQueryUI dialog, and was inheriting a 'width:95%' from '#dialog input'. The 'width:30px' in my style sheet was being ignored, until I changed it to 'width:30px !important', in all of F/F, Chromium, and Opera. It was ignored in both the div (#sButton2) and class (.sButton) styles.
I don't understand this. What's the point of inheritance if you can't over-ride it without adding arbitrary !important's? Is css inheritance broken? Isn't !important just admitting that it's broken?
I had originally thought that the entire style sheet was being ignored, because the input button expanded to 95%, and made it look like everything else was being ignored as well. However, I eventually realised that part of the style was actually working - 'cursor:pointer' did show a cursor.
Thanks everybody.
# is the correct prefix for IDs (as you actually use in your second code example), but you shouldn't wrap quotes around the css code. Try it like this:
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
Executing a validator on the code (which is always a good idea) would have told you all this as well!
I was having trouble with two types of buttons.
It was a form button and a css button basically. And I was advised that the css button whould use display:inline-block;
This made the whole a href tag actually look like a button.
But this invisible margin seems to be screwing up something. I tried separating them into separate css classes, but oddly, applying a real margin to the css button gives an additional margin as well. What's causing this?
You can easily see it here (low graphics):
www.matkalenderen.no
Basically, code looks like this:
<input type="submit" value="Logg inn" class="button_blue" alt="ready to login">
<a class="button_css_red" href="access.php">Glemt passord</a>
CSS
.button_red, .button_blue, .button_css_red, .button_css_blue {
background-image:url("../img/sprite_buttons.png");
background-repeat:no-repeat;
border: none;
color:#FFFFFF;
display:inline-block;
display:inline-block;
font-size:12px;
height:27px;
width:98px;
}
.button_css_red, .button_css_blue {
margin-top:20px;
}
Just found the answer myself :)
Looks like I was able to fix it by applying a line-height of about 31 pixels.