I am trying to add some css to my button and for some reason this is not working.
Index page
<input style="margin-top:10px;" type="submit" class="loginButton" title="Subscribe" value="Subscribe" />
CSS
.loginButton {
-moz-box-shadow: 0px 0px 0px 1px #ffffff;
-webkit-box-shadow: 0px 0px 0px 1px #ffffff;
box-shadow: 0px 0px 0px 1px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9e0000), color-stop(1, #ff0000));
background: -moz-linear-gradient(top, #9e0000 5%, #ff0000 100%);
background: -webkit-linear-gradient(top, #9e0000 5%, #ff0000 100%);
background: -o-linear-gradient(top, #9e0000 5%, #ff0000 100%);
background: -ms-linear-gradient(top, #9e0000 5%, #ff0000 100%);
background: linear-gradient(to bottom, #9e0000 5%, #ff0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e0000', endColorstr='#ff0000',GradientType=0);
background-color: #9e0000;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #1c0101;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Trebuchet MS;
font-size: 18px;
padding: 18px 44px;
text-decoration: none;
text-shadow: 0px 1px 0px #000000;
}
What could this be? as I used this style before.
It works pretty well for me
Double check your CSS paths and class hierarchy.
It's working. Make sure to include the correct path for external CSS or if you are using inside the html file, make sure to mention the css script inside
<style type="text/css"></style>
https://i.stack.imgur.com/NkrJ8.jpg
Hi it is working fine and please double check you code, if not just add the css class as shown below (add the class with input)
input.loginButton{ /*HERE YOU CAN ADD YOUR CSS CODE*/}
Related
I have been trying with no success to add a custom button, you create in this site. I have made sure my class is called the same thing in html as the code in css that has been provided BUT nothing happens. I have tried deleting all the different webkits and building it out line by line. The strange thing is when I can get it to work it basically creates the button I do want but with portions of the box on different lines.
.button {
background: #11CDD4;
background-image: -webkit-linear-gradient(top, #11CDD4, #11999E);
background-image: -moz-linear-gradient(top, #11CDD4, #11999E);
background-image: -ms-linear-gradient(top, #11CDD4, #11999E);
background-image: -o-linear-gradient(top, #11CDD4, #11999E);
background-image: linear-gradient(to bottom, #11CDD4, #11999E);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color: #FFFFFF;
font-family: Arial;
font-size: 40px;
font-weight: 100;
padding: 40px;
box-shadow: 1px 1px 20px 0px #000000;
-webkit-box-shadow: 1px 1px 20px 0px #000000;
-moz-box-shadow: 1px 1px 20px 0px #000000;
text-shadow: 1px 1px 20px #000000;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
.button:hover {
border: solid #337FED 1px;
background: #30ECDB;
background-image: -webkit-linear-gradient(top, #30ECDB, #2BC4AD);
background-image: -moz-linear-gradient(top, #30ECDB, #2BC4AD);
background-image: -ms-linear-gradient(top, #30ECDB, #2BC4AD);
background-image: -o-linear-gradient(top, #30ECDB, #2BC4AD);
background-image: linear-gradient(to bottom, #30ECDB, #2BC4AD);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-decoration: none;
}
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>If you are interested in collaborating on a project</h3>
<p class="contact-me-skill"> To be updated.</p>
<a class="button" href="mailto:myemail#gmail.com">Contact Me</button>
</div>
</div>
I built cssbuttoncreator.com. Thank you for using my app.
Your issues are as follows:
You don't have a closing tag, instead you have placed a closing tag.
There's an extra closing tag when there's just one div in the code.
I found this awesome app that allows me to pick my button exactly the way I want it and copy it to my code with CSS: http://livetools.uiparade.com/button-builder.html#
But I would like my button to extend from one end of the div to the other like in this w3 tutorial using "online scripts": http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_block&stacked=h
Is it possible for me to create a button with CSS in that button builder and make it appear like in the w3 tutorial (filling the width of the div)?
Also, how do I reduce the (vertical) space between buttons?
Yes you can, if you will use bootstrap just add the class btn-block to your buttons, else add width: 100%, display: block; if you want that all buttons are (filling the width of the div) I add a script that set the class to all buttons, if not set the class only to the desired.
For remove the vertical space if you are using bootstrap just add this style
.btn-block + .btn-block{
margin-top: 0;
}
note that in the snippet I add !important that is because in the snippet the bootstrap's style is after mine but normally is not.
$(document).ready(function(){
allbuttons = $(".button");
allbuttons.addClass("btn-block");
})
.btn-block + .btn-block{
margin-top: 0 !important;
}
.button {
border: 1px solid #0a3c59;
background: #3e779d;
background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
background: -moz-linear-gradient(top, #65a9d7, #3e779d);
background: -ms-linear-gradient(top, #65a9d7, #3e779d);
background: -o-linear-gradient(top, #65a9d7, #3e779d);
background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
padding: 10.5px 21px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #06426c;
font-size: 17px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #3e779d;
background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
background: -moz-linear-gradient(top, #65a9d7, #3e779d);
background: -ms-linear-gradient(top, #65a9d7, #3e779d);
background: -o-linear-gradient(top, #65a9d7, #3e779d);
background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
color: #fff;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="x">
<a href='#' class='button'>Button</a>
<a href='#' class='button'>Button</a>
</div>
I'm trying to put a link to another website but it applies the whole CSS style for the button to the link, I just want it to be a plain text anchor link..
The CSS is below, sorry that it's alot of code, used a button generator to get it.. I'm new to this!
a.nav {
width: 80%;
display: inline-block;
list-style-type: none;
margin-bottom: 10px;
}
nav ul {
padding: 0;
margin-bottom: 10px;
display: inline-block;
}
a:hover {
color: #900;
background: #fff;
}
a {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9', GradientType=0);
background-color: #f9f9f9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
.a:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9', GradientType=0);
background-color: #e9e9e9;
}
.myButton:active {
position: relative;
top: 1px;
}
see the updated answer, you can change the styles for the ".ext_link" as per your need
Fiddle Sample
Since you have styled the anchor link with your button style, all <a></a> tags with look like a button. To simply fix this, presuming you only want the button style applied to your nav, append a nav selector like so:
nav a {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9', GradientType=0);
background-color: #f9f9f9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
This way you only style the anchor tags that are within your nav.
JSFiddle updated
i have color issue with css. when i put HREF in link the font color changes to grey but there is no grey color in its class in css.
The code is below.
HTML
<a class="css_button_addHRS" >ADD HOURS</a>
When i add href in the tag it changes the font color of ADD HOURS to grey it should be white. Any Idea? There is no other grey A in css.
CSS
.css_button_addHRS {
font-size: 14px;
font-family: Arial;
font-weight: bold;
text-decoration: inherit;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
border: 1px solid #d02718;
padding: 9px 18px;
text-shadow: 1px 1px 0px #810E05;
-webkit-box-shadow: inset 1px 1px 0px 0px #f5978e;
-moz-box-shadow: inset 1px 1px 0px 0px #f5978e;
box-shadow: inset 1px 1px 0px 0px #f5978e;
cursor: pointer;
color: #ffffff;
display: inline-block;
background: -webkit-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: -moz-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: -ms-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: linear-gradient(180deg, #f24537 5%, #c62d1f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f24537",endColorstr="#c62d1f");
}
.css_button_addHRS:hover {
background: -webkit-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: -moz-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: -ms-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: linear-gradient(180deg, #c62d1f 5%, #f24537 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c62d1f",endColorstr="#f24537");
text-decoration: none;
color: #ffffff;
}
.css_button_addHRS:active {
position: relative;
top: 1px;
color: #ffffff;
}
this css creates a button rounded corner in red color with white font color. Help will be appreciated.
You have to specify This. The page links will automatically change to default color of links, so you have to add this:
<style type="text/css">
a:link,
a:visited,
a:hover,
a:active{
color: #FFF;
text-decoration: none;
}
</style>
What editor do you use to code?
It sounds like it's default styling of a :visited link.
You should add this to fix it:
.css_button_addHRS:visited {
color: #ffffff;
}
The link, visited and active colors, if not specified, take the defaults values set by the browser, and it varies across browsers. Since you already specified a color for .css_button_addHRS class, the grey color surely appears when you have visited the link,so you have to specify a color for visited links, e.g:
.css_button_addHRS:visited{
color: #ffffff;
}
Hope it's useful!
In IE8 one of my buttons background's is overflowing it's border. Here is an image that highlights the problem:
A live example can be seen here: http://rcnhca.org.uk/sites/first_steps/
The markup for the button is:
<a class="button alpha bold" href="#">
<img alt="rcn icon" src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png">
</a>
And the css (I use filters to draw a gradient instead of an image):
a.button.alpha, a.button.alpha:focus {
margin-left: 0px;
}
a.button.omega, a.button.omega:focus {
margin-right: 0px;
}
a.button{
display: block;
position: relative;
float: left;
margin: 10px 5px;
right: 0px;
height: 2.438em;
line-height: 2.438em;
padding: 0 0.938em;
border: #3a90a7 2px solid;
font-size: 0.938em;
text-decoration: none;
color: #202d32;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.oldie a.button{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
a.button:hover {
border: #202d32 solid 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}
a.button:active{
padding-top: 0.125em;
padding-left: 1.063em;
padding-right: 0.813em;
height: 2.313em;
background: #e5e5e5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: #cccccc;
background: -moz-linear-gradient(top, #cccccc 0%, #cccccc 3%, #e5e5e5 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(3%,#cccccc), color-stop(5%,#e5e5e5), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -o-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -ms-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
-moz-box-shadow: 0 1px 2px #AAAAAA inset;
box-shadow: 0 1px 2px #AAAAAA inset;
}
.oldie a.button:active {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}
a.button img {
position: relative;
margin-right: 15px;
vertical-align: middle;
}
Does anyone know what's going on? Thanks.
I can't explain why, but when you remove the horizontal margins on the anchor it fixes the problem (both left and right)
My best guess is that the IE filter is doing something unpredictable.
If you wrap the element then apply a margin to that instead, it should solve it.
there is no way to do this for IE8 because its not support css3 BTW its work in IE9.
for more details about IE & CSS compatibility check this
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx