I am trying to create a simple button and design it using CSS3 and preview it in pastebin. I don't know what to add to my code so that it will show the button with the design, because it only shows a simple button.
CSS code:
.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
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);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>JS Bin</title>
</head>
<body>
<button type="button">Click Me!</button>
</body>
</html>
Remove the . before button in your CSS.
.button {
background: red;
}
makes all elements with class "button" red, while
button {
background: red;
}
makes all button elements red.
Using a simple link will apply your styles nicely even if you aren't using a form. Also be sure to use class in the tag to apply the styles correctly.
<a class="button">Click Me!</button>
What you have specified in the css .button is a class.
You need to add that to the button element.
Ofcourse you can add it to any element you want.
As per your code, it should be like
<button type="button" class="button">Click Me!</button>
You are created the button class, but you are not applying it. Just add the button class to the button input. it will work just fine.
<button type="button" class="button">Click Me!</button>
Here is the the out-put link:
http://jsbin.com/dizej/1/edit?html,css,output
Related
No matter what I do it won't detect the css file.
<link rel="stylesheet" type="text/css" href="CSS/customStyles.css" runat="server" />
I have tried to place it inside the contentplaceHolder Head both in master page and child page, i tried set path multiple ways,
<link rel="stylesheet" type="text/css" href="~/CSS/customStyles.css" runat="server" />
<link rel="stylesheet" type="text/css" href="/CSS/customStyles.css" runat="server" />
<link rel="stylesheet" type="text/css" href="CSS/customStyles.css" runat="server" />
Yet nothing works. I also read something about formvalidation and even tried to add on web.config
<location path="CSS">
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
and still nothing... Whhy does it not detect the css file ??
EDIT
This is directory
UPDATE
Here's an update, I tried to create a css file on main directory and it worked, so the problem is the css file won't be detected if it's inside a directory...
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
EDIT
Here's what seems to cause the problem
when i go to localhost:port/CSS/customStyles.css only this css appears
body {
}
.hidden {
display:none;
}
.customActive {
background-color:#cecee8;
}
.ctmHover:hover{
background-color:#cecee8;
}
However the file has all this code
body {
}
.hidden {
display: none;
}
.customActive {
background-color: #cecee8;
}
.ctmHover:hover {
background-color: #cecee8;
}
.Grid {
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-family: Calibri;
color: #474747;
}
.Grid td {
padding: 2px;
border: solid 1px #c1c1c1;
}
.Grid th {
padding: 4px 2px;
color: #fff;
background: #363670 url(Images/grid-header.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.Grid .alt {
background: #fcfcfc url(Images/grid-alt.png) repeat-x top;
}
.Grid .pgr {
background: #363670 url(Images/grid-pgr.png) repeat-x top;
}
.Grid .pgr table {
margin: 3px 0;
}
.Grid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.Grid .pgr a {
color: Gray;
text-decoration: none;
}
.Grid .pgr a:hover {
color: #000;
text-decoration: none;
}
.custom-modal-header {
background: #b0d4e3; /* Old browsers */
background: -moz-linear-gradient(top, #b0d4e3 0%, #88bacf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b0d4e3 0%,#88bacf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b0d4e3 0%,#88bacf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 ); /* IE6-9 */
border-radius: 15px 15px 0px 0px;
color: white;
}
.custom-modal-footer {
background: #b0d4e3; /* Old browsers */
background: -moz-linear-gradient(top, #b0d4e3 0%, #88bacf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b0d4e3 0%,#88bacf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b0d4e3 0%,#88bacf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 ); /* IE6-9 */
border-radius: 0px 0px 15px 15px;
color: white;
}
.custom-modal-confirm-btn {
background-color: #98c4d7;
color: white;
}
.custom-modal-confirm-btn:hover {
background-color: #000000;
color: white;
}
.custom-modal-cancel-btn {
font-weight: bold;
}
.custom-modal-cancel-btn:hover {
background-color: #6099ca;
color: white;
font-weight: bold;
}
.chkChoice label {
margin-right: 20px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 5px;
color: #142658;
border-color: #142658;
border-radius: 50px;
}
.chkChoice input {
padding-left: 20px;
margin-left: 20px;
}
Please try using base path:
<link rel="stylesheet" type="text/css" href="<%= HttpContext.Current.Request.ApplicationPath %>/CSS/customStyles.css" runat="server" />
I tried creating a new css file on the same folder and posting the code in there and it worked. I have more code on other CSS file and i checked several times everything is well formatted and I'm still trying to figure out what causes the code to not be read, so as for now the solution is just place the code in a different empty css file
I have the same issue and looks like the only way is to set an "absolute" path in the scope of the project.
If project looks like this:
CSS will not load by path:
<link rel="stylesheet" type="text/css" href="BenchmarsStyles.css">
It works only:
<link rel="stylesheet" type="text/css" href="/ModelPortfolio/UserControls/BenchmarsStyles.css">
Means, it should include all directories from the root of the project.
I hope it helps.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I made a website with HTML/CSS and I was working with my page navigator when I saw that there was a white space between my background and border of two words.
A, d I don't now how to remove that white space here is a picture
The link buttonsar left above is there someone that now how to remove that?
My code.
<html>
<head>
<style>
#h1index {color : black; text-align: center; background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid; border-radius: 25px; border-color: black;}
body {background-color: #F8F8F8;} <!-- achtergrond kleur -->
#tekstindex {color : black;}
#homelink {background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid; border-color: black transparent black black; text-decoration: none; border-radius: 25px 0px 0px 25px; font-size: 25px; padding-left: 5px; }
#projectslink {background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid; border-color: black transparent black transparent; text-decoration: none; font-size: 25px; }
</style>
</head>
<body>
home <!-- hompage link --> projects <!-- link naar projects pagina -->games<!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1> <!-- welcom message -->
<p id="tekstindex">latest news.</p>
</body>
</html>
Inline elements are sensitive to white space in your code. Just remove it.
#h1index {
color: black;
text-align: center;
background: linear-gradient(to bottom, #F2F2F2, #94A394);
border-style: solid;
border-radius: 25px;
border-color: black;
}
body {
background-color: #F8F8F8;
}
<!-- achtergrond kleur --> #tekstindex {
color: black;
}
#homelink {
background: linear-gradient(to bottom, #F2F2F2, #94A394);
border-style: solid;
border-color: black transparent black black;
text-decoration: none;
border-radius: 25px 0px 0px 25px;
font-size: 25px;
padding-left: 5px;
}
#projectslink {
background: linear-gradient(to bottom, #F2F2F2, #94A394);
border-style: solid;
border-color: black transparent black transparent;
text-decoration: none;
font-size: 25px;
}
home<!-- hompage link -->projects
<!-- link naar projects pagina -->games
<!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1>
<!-- welcom message -->
<p id="tekstindex">latest news.</p>
Obviously, it is due to the space between two words.
You should use <span> to wrap the two words and apply the style on <span>
try floating the buttons to the left. float:left. Also, setting the position to relative might work.
I have a button and an anchor tag booth using the same class, but the button gets bigger for some reason. I found a question here already solved but it still is a little bit bigger than the other.
HTML:
<div class="item-actions">
<ul>
<li><i class="fa fa-trash"></i> Gravar</li>
<li><button type="submit" class="button"><i class="fa fa-trash"></i> Lixo</button></li>
</ul>
</div>
CSS:
.item-actions{
float: right;
}
.item-actions ul li{
display: inline-block;
}
.button {
background: #3a9665;
background-image: -webkit-linear-gradient(top, #3a9665, #2d7a51);
background-image: -moz-linear-gradient(top, #3a9665, #2d7a51);
background-image: -ms-linear-gradient(top, #3a9665, #2d7a51);
background-image: -o-linear-gradient(top, #3a9665, #2d7a51);
background-image: linear-gradient(to bottom, #3a9665, #2d7a51);
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 4px 12px 4px 12px;
border: solid #2d7a51 1px;
text-decoration: none;
}
.button:hover {
background: #2d7a51;
text-decoration: none;
}
Here I found a Solution so I added this bit of CSS:
button::-moz-focus-inner {
padding: 0;
border: 0
}
But the result still isn't what I want, you will notice some difference in the following screenshot:
EDIT:
I've removed i tags and the problem still exists, so thats not the problem.
I can recreate the issue on Mac OS X 10.9.5 with FireFox version 32.0.2. Adding line-height: 1em; to .button seems to work when I test it in FireFox:
.button {
background: #3a9665;
background-image: -webkit-linear-gradient(top, #3a9665, #2d7a51);
background-image: -moz-linear-gradient(top, #3a9665, #2d7a51);
background-image: -ms-linear-gradient(top, #3a9665, #2d7a51);
background-image: -o-linear-gradient(top, #3a9665, #2d7a51);
background-image: linear-gradient(to bottom, #3a9665, #2d7a51);
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
line-height: 1em;
padding: 4px 12px 4px 12px;
border: solid #2d7a51 1px;
text-decoration: none;
}
I believe the issue’s cause comes from <button type="submit" class="button"> tag having explicit styling while your <a href="#" class="button"> doesn’t:
<div class="item-actions">
<ul>
<li><i class="fa fa-trash"></i> Gravar</li>
<li><button type="submit" class="button"><i class="fa fa-trash"></i> Lixo</button></li>
</ul>
</div>
Also could be caused by the use of explicit pixel sizing in .button with font-size: 12px;. I would recommend using another scheme for sizing such as em’s or even percentages.
try to set the line-height of icons to 1:
.fa {
line-height: 1;
}
border-radius is not working on IE-8 . Need help.
I am using the following code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Border</title>
<style type="text/css">
.mc-button {
positon:relative;
behavior: url(/PIE-1.0.0/PIE.htc);
-webkit-box-shadow: #999 0 0 12px;
border: 1px solid #696;padding: 60px 0;text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
}
</style>
</head>
<body>
<input class="mc-button" type="button" value="submit"/>
</body>
</html>
That code i am using for a button. But I am not finding any way to solve. I checked previous questions and as well as answers ,but those solutions are not working.
border-radius is not supported by IE8.
To check browser compabitility the http://caniuse.com site is a great resource.
I'm using CSS3 buttons for a website I'm working on. However it would appear that the CSS controlling these buttons is breaking the links it styles. If anyone could point out where I am going wrong that would be greatly appreciated.
CSS controlling buttons:
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding:5px 15px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.blue {
color: #d9eef7;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#009DD1), to(#009DD1));
background: -moz-linear-gradient(top, #009DD1, #009DD1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
And the offending links:
<div class="nav">
<a href='http://www.twantrum.com/mild.html' target="_top" class='button blue'>Mild</a>
<a href='http://www.twantrum.com/restrained.html' target="_top" class='button blue'>Restrained</a>
<a href='http://www.twantrum.com/angry.html' target="_top" class='button blue'>Angry</a>
<a href='http://www.twantrum.com/mel-gibson.html' target="_top" class='button blue'>Mel Gibson</a>
</div>
There is no error in the markup you posted.
Looking at your page itself though, i noticed this section, which produces the error:
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function(){ return false; });
});
</script>
Why this does not work is answered here: What's the effect of adding 'return false' to a click event listener?
Hope it helps.