I tried to remake that 3D style button on Flat websites like the share button on G+ but when I press it, it affects the whole page by adding a margin-top:3px to everything. It somehow works the way I want it, but it doesn't apply only to self.
This is my code:
.button {
width: 100%;
background-color:#f1c40f;
color: #000000;
border: 0;
border-bottom: 3px solid #f39c12;
height: 50px;
font-family: 'Source Sans Pro', Montserrat, Helvetica, sans serif, Arial;
font-size: 24px;
}
.button:active {
border-bottom: 0;
margin-top: 3px;
height: 47px;
outline:0;
}
Figured the problem. I assigned a dip display:inline-block to the form. Works now! Watch out with that positioning. Can cause a lot of trouble!
Related
When I hover over the button, it stops displaying "Middle School" and instead just becomes a white bar. How do I fix this without using
.buttonM {
width: 100%;
/* set a width so it doesnt change upon hover */
border: 1px solid #fff;
background: #de5426;
padding: 3px 21px;
color: #ffffff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: middle;
letter-spacing: 1px;
font-weight: bolder;
font-family: "montserrat";
}
.buttonM:hover span {
display: none
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
cursor: pointer;
}
.buttonM:hover:before {
content: "Middle School";
}
<button class="buttonM">
<span>Middle School</span>
</button>
I understand you confusion. I was this confused when I started too.
anyway, you don't need to add span in a button unless you have a purpose for that.
the problem happens because you added hover to the span and to the button. so my advice is to minimize your code as much as possible. you also added two font family for the button. don't do that. also don't add cursor: pointer in the hover. you should put it in the button style, not its hover.
here is a working button from your code and I hope it's what you need.
.buttonM {
width: 100px;
height: fit-content;
background: #de5426;
color: #fff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
}
<button class="buttonM">
<span>Middle School</span>
</button>
I have a 'Download' button on my HTML webpage and I have set some attributes for it.
Whenever I refresh my page, the button appears like this, very rarely:
Text Outside the Button
But then, it will look like this and this is the normal-looking button:
Normal Button
.navbar-download-btn {
position: absolute;
right: 4%;
top: 5.7%;
color: white;
background-color: blue;
border: 2.2px solid white;
padding: 0.8%;
border-radius: 3.5px;
outline: none;
cursor: pointer;
font-weight: bolder;
font-family: Noto Sans KR, sans-serif;
letter-spacing: 0.7px;
transition: 0.7s;
}
<button class="navbar-download-btn nonindex">Download</button>
I think there might be a problem in the padding of the download button, Increase the padding from the right and also try running this code in other browsers, this had been a problem for me too earlier but sometimes it could just be your browser...
text-align: center;
margin-right:
I have the simple form and attached the css file for that. As you can see there are 2 fields and one checkbox - I would like to make the checkbox directly under the textarea, with around 1-2px space, not as it is now - how can I modify that? I thought the problem is somewhere here:
.textox, .textoxarea {
width: 340px;
border: solid 1px #999999;
padding: 2px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0px 1px 2px 0px #9C9C9C;
background-color: #FFFFFF;
outline: none;
color: #474747;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 100;
}
but I can't find the proper way of doing that.
Here's my fiddle.
Thanks!
Remove the empty paragraphs between textarea and checkbox.
In your fiddle it's on lines 11 and 13.
http://jsfiddle.net/7hq0x6u4/3/
.center p:nth-of-type(2),.center p:nth-of-type(3){
margin:0;
}
This will reduce the space of margin in both the P tags which are covering the input elements
DEMO
Normally use of p tags to align input tags are not recommended.
Hi to your <input type="checkbox"> add these styles.
.foo {
bottom: 1px;
margin-left: 0;
margin-right: 5px;
position: relative;
}
.foo as an example class on checkbox.
I am trying to apply a double border to a header element. The fiddle above works as expected in all browsers except for Chrome. In Chrome (using version 37.0.2062.120 on Windows 7 here), the bottom border in some cases is 2px away from the top border and in other cases is 1px away. I do not understand this inconsistency. Using the web inspector, I see some weird decimal heights for elements, so I assume it is some rounding error. Where are these decimal heights coming from?
Here's the fiddle:
http://jsfiddle.net/7qshmLbv/2/
and here is the CSS style I'm using:
h2 {
color: #023D62;
text-transform: uppercase;
font-size: 11px;
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border-bottom: 2px solid #7F7F7F;
padding-bottom: 3px;
vertical-align: top;
position: relative;
margin-bottom: 20px;
}
h2:before {
background: none;
border-bottom: 1px solid #7f7f7f;
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: -4px;
pointer-events: none;
}
Could anyone please help? Thanks.
Well, I'm an idiot. Turns out my browser was zoomed in on Chrome.
I have a button that has only one letter in it. this is the HTML for it:
<button type="button" class="clicker">X</button>
I need to resize that button to make it smaller as much as I need, and also to keep that letter following the size of the button.
I have tried the following css andit resizes the button, but the text is not following. It is either at the bottom of the button or not visible at all.
.clicker {
float: right;
font-family:"Calibri",Arial,Sans Serif;
font-size:1.0em;
line-height: 30px;
color:red;
text-align: center;
wordwrap: center;
text-shadow:1px 1px 1px #FFFFFF;
width: 30.0px;
height: 25.0px;
}
Reduce the line-height to 23px
http://jsfiddle.net/GfETQ/1/
I don't think you need font-size and line-height properties. Use vertical-align instead.
.clicker {
font-family: "Calibri", Arial, Sans Serif;
font-size: 1.0em;
color:red;
text-shadow: 1px 1px 1px #FFFFFF;
width: 30px;
height: 25px;
vertical-align: middle;
}
Fiddle:- http://jsfiddle.net/7wCLu/
It's just becuase of your line-height. Remove it and it works :)
Fiddle.
CSS:
.clicker {
float: right;
font-family:"Calibri", Arial, Sans Serif;
font-size:1.0em;
color:red;
text-align: center;
wordwrap: center;
text-shadow:1px 1px 1px #FFFFFF;
width: 30.0px;
height: 25.0px;
}
If you change to line-height: 20px; then it will center.