Can anyone tell me what code to use to make a CSS button open into a new window? I see that the code to do this for a hyperlink on my site is: target="_blank". But, I can't figure out how to use this code in conjunction with a CSS button? The code for my CSS button is:
<p style="text-align: center;">
[button-link url="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting"]
TAKE THE SURVEY HERE »
[/button-link]
</p>
Where would I insert the target="_blank" code in my CSS code to create the same "new window" effect that I'm able to create with a hyperlink?
Thank you, thank you!!!
Cassandra
You can not do what you are trying to achieve. You can only really practically make "buttons" with either HTML form input elements or HTML anchor elements. Moreover, the target=_blank declaration to open a link in a new window applies only to the HTML anchor element and will not work on other things pretending to be anchors.
What you should be doing:
<p class="paragraph">
<a href="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting" target="_blank">
TAKE THE SURVEY HERE »</a>
</p>
Here the target=_blank has been inserted into the anchor element and this solves your problem entirely.
You can then also apply the css styling to the .paragraph definition and the styling for the anchor to the anchor sub-part as such:
CSS:
.paragraph{
text-align:center;
}
.paragraph a {
font-color:#dd0000;
display:inline-block;
border:1px solid #000;
}
try this.just copy,paste and run it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
a{
background-color: orange;
border:3px outset black;
border-radius: 5px;
text-decoration: none;
color: black;
font-size: 20px;
position: absolute;
}
a:focus{
background-color: white;
}
</style>
TAKE THE SURVEY HERE »
</body>
</html>
I have made you a good button here : DEMO
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
<a class="btn" href="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting" target="_blank">
TAKE THE SURVEY HERE »</a>
Related
After searching the web for other's solutions to coloring half of a character using CSS, I found this: http://jsbin.com/rexoyice/1. After a small adjustment to suit my purposes, I implemented it. I had planned to use text-shadow on this. The shadow covers the "text," which is actually colored by the background. I am a novice at CSS and have no clue how to use z-indexing to put the text-shadow behind the background. I'm open to other solutions that others may come up with if z-indexing isn't the ideal solution.
In the code below, the top line has the shadow applied, while the lower one doesn't.
.HalfColor
{
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
/*^For compatibility*/
color: transparent;
/*text-shadow:0 0 0 #0000 !important*/
}
p
{
text-shadow: 1px 1px 2px #000;
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>
Use drop-shadow filter instead:
.HalfColor {
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%, #1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
/*^For compatibility*/
color: transparent;
}
p {
filter: drop-shadow(1px 1px 2px #000);
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>
Try using pseudo-elements
.HalfColor {
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%, #1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
p.HalfColor {
position: relative;
}
p.HalfColor:after {
content: 'TEST!';
position: absolute;
top: 0;
left: 0;
text-shadow: 1px 1px 2px #000;
z-index: -1;;
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>
I'm trying to implement the css inner-text shadow solution found here: http://dabblet.com/gist/1609945
Here's the twist:
I'm applying this to a submit button. I didn't think this would be an issue as the content: attr(title) simply becomes content: attr(value). I've commented out all possible conflicting styles as well, but it won't take - has anyone experienced difficulty applying this to a submit button? Here's my full rails3, html css code:
My html.erb:
<div class="row-submit" style="text-align: center">
<div class="form-create">
<table>
<tr>
<td class='facebox-save'>
<input id="lock_submit" class="btn-submit" type="submit" name="commit" value="Save">
</td>
</tr>
</table>
</div>
</div>
My css:
.form .row-submit .btn-submit{
display: block;
position: relative;
width: 600px;
height: 300px;
color: black;
font-family: sans-serif;
font-weight: 700;
font-size: 7em;
letter-spacing: 1px;
border-radius: 6px;
border: 1px solid #4e7732;
cursor: pointer;
background: #7faa3d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdmYWEzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZTc3MzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #7faa3d 0%, #4e7732 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7faa3d), color-stop(100%,#4e7732)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7faa3d 0%,#4e7732 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7faa3d 0%,#4e7732 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7faa3d 0%,#4e7732 100%); /* IE10+ */
background: linear-gradient(to bottom, #7faa3d 0%,#4e7732 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7faa3d', endColorstr='#4e7732',GradientType=0 ); /* IE6-8 */
}
.btn-submit:before, .btn-submit:after {
content: attr(value);
color: rgba(255,255,255,.5);
position: absolute;
}
.btn-submit:before{ top: 1px; left: 1px}
.btn-submit:after{ top: 2px; left: 2px}
The result: (no effect)
Maybe I just need another pair of eyes?
Thanks,
Sean
isn't it a bit easier mixing rgba() color and text shadow ? DEMO
HTML
<input id="lock_submit" class="btn-submit" type="submit" name="commit" value="Save">
CSS
[value] {
font-size:80px;
padding:1em 2em;
background:#4E772C;
font-weight:bold;
color:rgba(0,0,0,0.5);
text-shadow:2px 2px 1px gray;
}
I'm using javascript to dynamically add spans to the html on my page, and giving those spans the class "query_error" and a dynamic title based on the value of err_msg, e.g,
"<span class=query_error title='" + err_msg + "'>" + replacement + "</span>"
(where "replacement" is simply the piece of text that has the query error). All this works fine, and I can apply css to the span with
.query_error{
font-family: "Monaco", "Inconsolata", Courier, monospace;
font-size: 15px;
font-weight: bold;
color: red;
}
But I can't figure out how to add css to the title itself so I can change the font color, size, etc. Is this possible (without using a plugin)?
TIA
With CSS3 you can now target the [title] attribute but as to a real world solution i don't see any. I would rather suggest you used a plugin such as tipsy for that task, as it is more cross browser supported and less fuss.
This is a demo of a styled [title] attribute:
CSS
span:hover {
color: red;
position: relative;
}
span[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
Demo: http://jsfiddle.net/BvGHS/
Short answer, nop. The title attribute is that, a title and can't be styled.
Long answer, you probably need a tooltip plugin for this which replaces the title with an html element.
The tooltip which appears when you move your cursor over an element with the optional title attribute is a browser feature and can, as far as I know, not be styled using CSS.
You can create your own custom tooltips using JavaScript. There are a couple of plug-ins and tutorials on the web.
Really getting some unwanted behaviour from IE7 and IE8 on header and fotter vertical menu. Did this before without problem but while using Wordpress it's just not getting it right.
Here is the test site: http://examples.iamwebsitedeveloper.com/walkinmyshoes/
And here is the code used for #headerNav:
#headerNav {
display:block;
float: left;
margin: 0 auto;
width: 940px;
position: relative;
z-index:99999;
font: Verdana, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #894ba6;
background: -moz-linear-gradient(top, #894ba6 0%, #743a8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#894ba6), color-stop(100%,#743a8f));
background: -webkit-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: -o-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: -ms-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: linear-gradient(top, #894ba6 0%,#743a8f 100%);
margin-bottom:20px;
behaviour:url(PIE.htc);
}
.ie7 #headerNav,.ie8 #headerNav{*display: block;*zoom:1;}
#headerNav ul{
font-size: 1.077em;
list-style:none;
margin:0;
padding:0px;
}
#headerNav li {
float: left;
position: relative;
border-right:1px solid #8B4DA7;
}
Moreover if you look at the footer segment the background color and block is not coming! Moreover the footer navigation is behaving the same way!
Using IE conditional classes as well as css3pie, I can't get it working properly.
Evan Vai,
Strange problem when i opening the debugger and closing it the css comes back. Its may be the execution of jQuery.
I am trying to make my <hr /> (hr) element pinkish, and am using the following css rule for this:
hr {height: 1px; color: #ed1d61;background-color: #ed1d61;
}
But there is still a black line showing through it.
(here is a look at it on the site that I am making: http://www.yemon.org/ , its the only horizontal line in the design.
How do i get the line uniform pink?
Change it to this:
hr {
height: 1px;
color: #ed1d61;
background: #ed1d61;
font-size: 0;
border: 0;
}
Looking at your page, I think this would look best:
hr {height: 2px;
background-color: #ed1d61;
border:none
}
A demo is here.
Try setting the border color property: border-color:#ed1d61;
The hr element is made of border so a simple border:none and you'll get rid of the excess.
Then you simply have to play on your height to make it as thick as you'd like.
Try this:
.hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
margin: 25px;
}
hr{
background-color: #ed1d61;
border-width: 0;
/*change your size in this place*/
padding-top: 1px;
}
<hr/>
sadf