i've tryed making a smooth button with link tag in html and css, can i make so when people hover the button it will not show the link in bottom of the browser? and then when they click i want an option to control if it will open the link in a new tab. And maybe you can improve my button?
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Professional Website</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu" type="text/css">
<style type="text/css">
.button {
background-color: #3366FF;
padding: 10px 30px;
border-radius: 5px;
color: lightblue;
font-family: 'Ubuntu', Arial;
font-size: 14px;
text-decoration: none;
}
.button:hover {
background-color: #0066FF;
-webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
}
.button:active {
border: 1px solid #0033CC;
-webkit-box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<br />
<br />
<center>
<a class="button" href="#">Link Button</a>
</center>
</body>
</html>
Thank you guys.
I dont think you can disable this behaviour as it is part of the browser. What you could do is maybe add a '#' as your href, and have the real link under a data attribute. Then when the button is clicked you redirect the user to said url using your data attribute content.
Now, everything you are asking is not user friendly at all. Removing the ability of the user to see where the link is pointing to, as well as forcing a new tab.
Can i make so when people hover the button it will not show the link in bottom of the browser?
This is a default behavior of the browser, when you hover over a link it shows the destination bottom left for the user. Sadly you can not style this and it will always show when hovering over an anchor tag with a href. Alternatives to this would be to use a form/submit work around or use JS to redirect the user.
When they click i want an option to control if it will open the link in a new tab
You can use the target attribute of an anchor tag and specify _blank which will open the new link in a new tab/window (depending on the setup of the users browser)
<a class="button" href="#" target="_blank">Link Button</a>
Here's how you can do it:
Add the href as a data attribute, like this:
<a class="hiddenurl" data-href="YOUR_URL">LINK_TEXT</a>
then in javascript:
window.onload = function(){
aLinks = document.getElementsByClassName("hiddenurl");
for(var i = 0; i < aLinks.length; i++){
aLinks[i].onclick = function(){
window.location.href = this.dataset.href;
}
}
}
Related
Hi I'm designing a website and run into trouble on my css I'm kinda new on this css thing and its kinda weird that the css rule I made for input text is not working correctly on my text area here is my css
input[type="text"], textarea {
background: rgba(255,255,255,0.3);
border: none;
border-radius: 4px;
padding: 2%;
color: white;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0px 1px 1px #f2dede inset, 0px 0px 8px #dff0d8;
}
and this is how it looks like on the browser
the text field Name has the correct glow but its weird that the textarea is not considering that they both have the same rule as what I pasted on my code above..
Try setting the following:
input[type=text]:focus, textarea:focus {
box-shadow: 0px 1px 1px #f2dede inset, 0px 0px 8px #dff0d8;
outline: none;
}
Some browsers set an outline on inputs, text areas etc on focus automatically and this most probably is the cause of your problem. Setting the outline to none should remove this behaviour.
this is because input has default style,when set your style,you can reset focus style:
*:focus {outline: none;}
My html does not load the css style file. The preview povided by Eclipse correctly shows the changes I made in the css file. If I am loading the file with Firefox on the other hand these changes are gone. This also hapens if loaded on another machine. I emptied my cache etc. (using CCleaner). However if I load the html file with IE all changes are visible. Intrestingly this is only the case for colors.
I include the css file using the following line:
<link rel="stylesheet" type="text/css" href="./css/style.css" />
The releveant css lines:
#menubar
{ width: 920px;
height: 50px;
text-align: center;
margin: 0 auto;
background: #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
The lines in html:
<div id="menubar">
<ul id="menu">
<li class="current">Home</li>
<li>Practical Information</li>
<li>People</li>
<li>Programme</li>
<li>Contact Us</li>
</ul>
</div><!--close menubar-->
Based on the comment:
I have changed the color to blue #000099 but it remains in the original grey color that was there before
You have 4 rules to set the background colour.
background: #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);
Each one is applied in turn and ignored if the rule isn't supported by the browser.
You are only changing the first rule, which is the only rule supported by IE.
Since Firefox supports -moz-linear-gradient that continues to override the previous background colour rule, so it gets ignored.
You need to change your gradient rules too.
Note, however, that the -prefix- rules are experimental and should generally be avoided for production work and that you are missing an unprefixed linear-gradient for use in browsers which have their final implementation of the property. Support for prefixed rules will be dropped at some stage.
I am trying to link buttons using a button tag that is set to show a button made with CSS3.
The button works and display properly in Chrome and Safari but in FireFox the button shows but it doesn't link, it also messes up the style of the page a bit.
I know you use to not be able to use the
The link to the page is here http://pt11.com/index2.php?x=videos.html
Here is my HTML:
<head>
<link rel="stylesheet" type="text/css" href="videos.css" />
</head>
<br>
<div class="vidholder">
<div class="textbox">
<h2>Eythor Bender at TEDMED 2011</h2>
</div>
<div class="textbox2">
Eythor Bender's Ekso Bionics makes powered, wearable robots known as "exoskeletons" that boost human strength, endurance, and mobility. But can they help a paraplegic walk? Watch this incredible story.
</div>
<div class="img">
<img src="ted.png">
</div>
<button type="button" name="" value="" class="css3button">Watch Video</button>
</div>
<br>
</div>
Then the CSS for the button
button.css3button {
padding
margin:-3px 0px 0px 325px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ff2819 0%,
#ab0000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ff2819),
to(#ab0000));
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: 1px solid #7d0000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
Is there a reason that you need the button element? Why not just use
<a class="css3button">
and change your css selector to match. That would apply the styles to the anchor, remove the need for the button element, and it would work in all browsers.
I want to create a content wrapper with a left and right shadow, not a bottom shadow. This is sort of what I'm going for: http://community.mybb.com/ notice the shadow (though this uses an image, not css).
What's the best way to do this with CSS?
Your best bet is to use an image to be compatible with older browsers. For CSS you'll use box-shadow but IE9 is the first IE to support box-shadow.
That being said you'll need to use two box-shadow properties if you want to use CSS. You'll need to do two of them.
Take a look at http://css-tricks.com/snippets/css/css-box-shadow/
Also the generator at http://css3generator.com/
Here is a vague idea of what to do
<div id="leftBorder">
<div id="rightBorder">
<div id="content">Content here</div>
</div>
</div>
#leftBorder {
-webkit-box-shadow: -10px 0px 5px 0px #999999;
-moz-box-shadow: -10px 0px 5px 0px #999999;
box-shadow: -10px 0px 5px 0px #999999;
}
#rightBorder {
-webkit-box-shadow: 10px 0px 5px 0px #999999;
-moz-box-shadow: 10px 0px 5px 0px #999999;
box-shadow: 10px 0px 5px 0px #999999;
}
Alternatively you can potentially set just the border property alone bit it won't give you the nice fuzzy shadow look.
It may be tough to support below IE9 and you may need to throw in some pictures anyway. An old A List Apart article explains how to do this but it's not pretty.
http://www.alistapart.com/articles/cssdrop2/
I'm trying to create an input box with two buttons on the left and right. Here's the frankenstein monster I have so far: http://vegan.fm/clone/?p=8679
It should look like the textbox+button here: http://appsumo.com/welcome/?next=/
I've been able to get it to align sort of well, but then it seems to just get jumbled on a different OS or computer.
I've done this by obsessively tweaking the padding and margin values, but my gut tells me there's a better practice. So far, I haven't found anything with a google/stackoverflow search. Any help is appreciated. Thank you.
Update: The problem I'm having is the "height" value for the button and the input box are exactly the same, yet the button is always higher than the input box.
Here's some code:
.halfbutton {
border-top: 1px solid #f0d995;
background: #806a43;
padding: 0px 3px 0px 3px;
background: -webkit-gradient(linear, left top, left bottom, from(#d1ad51), to(#806a43));
background: -moz-linear-gradient(top, #d1ad51, #806a43);
height: 30px;
width:25px;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
And for the input box:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input style="z-index:1999;height:30px;margin:0 -.1em 0 -.1em;border:1px solid;border-color:#a1a1a1;" size="20" type="text" name="s" id="s" value="<?php ... />
</form>
Dunno have i understood the question right.
To make it seems like in your link you need to use background img in your input form;
You may make it look like inset input form with css3
in css
#inputform{
background-color: #f7f7f7;
-moz-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
-webkit-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
...
}
There's a link in the comments with your code from website;
At the moment, the alignment seems ok to me (in Chrome) but there's no border on the input so it's hard to tell what's going on.
My comment though - right now you have the add'l search options as a dropdown to the left of the input field, then the "more" dropdown with add'l choices attached to the right of the input. I'd argue this doesn't follow the typical user's model of search boxes where immediately to the right of the input is the submit/options button. Maybe move the options button to the right, then float the "more" as a separate button to the right of that (or below).
Just a thought.