I want to fix the classic bootstrap style hamburger button on my navbar, like the one that appears as a toggle button when the screen size gets sufficiently small.
Anyways, how can I display the button as is, without having to implement it through the navbar-toggle class?
EDIT: Here is the button I have:
<div>
<div class="center">
<button type="button" class="btn">☰</button>
</div>
</div>
body {
background: #222;
}
.center {
width: 100px;
margin: 50px auto;
}
.btn {
background-color: #222;
border: 1px solid #3A3A3A;
color: #D3D3D3;
width: 42px;
margin-left: 42px;
font-size: 23px;
height: 34px;
transition: color 0.45s;
transition: border 0.45s;
}
button.btn:hover {
color: #2978E0;
border: 1px solid #61A5FF;
}
https://jsfiddle.net/rstty1ye/
Using a UTF-8 character was mentioned on tutsplus.com
It's not my original finding or idea.
Nevermind, I figured it out.
Created a custom button and used an UTF-8 character: Trigram for Heaven for the bars.
Related
I use the transform property for animation when I hover and set animation such as rotation to element.
However, this occasionally causes defects like the image below.
Regarding this problem, I confirm that no matter what site I look at it is not written.
And even Twitter to this problem does not correspond!
How should I respond to this problem?
animation problem in the vicinity of the boundary
For example, suppose you have HTML with such a CSS applied.
a {
border-radius: 4px;
display: inline-block;
height: 50px;
text-decoration: none;
width: 150px;
background: #a0f;
border-radius: 4px;
text-align: center;
transition: all 0.6s ease;
box-shadow: 5px 5px #50a
}
span {
color: #fff;
font-weight: bold;
line-height: 50px;
}
#link:hover {
border-radius: 25px;
width: 50px;
}
<div>
<a id="link">
<span>text</span>
</a>
</div>
When hovering to the right boundary of this button, the button repeats expansion and contraction at short intervals.
A problem similar to this is occurring in the twitter gif uploaded above.
How should I fix this problem?
The following CSS apparently results in the following Button. As you can see there is a weird gray plain button within the white padding. How do I fix this?
How do I make the gray go away?
.button_style {
background-color: white;
color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
NOTE: The green space is the background, the white space and gray space are both clickable button.
Use border: 0 or border: none to remove that. By the way, what browser are you using?
HTML
<button class="button_style">hello</button>
CSS
.button_style {
border: 0;
background-color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
This is what I had previously, which was giving me the plain gray button:
<p><span class="button_style">Website</span> </p>
I changed it to the following, which resolved my problem:
<input class="button_style" type="button" onclick="location.href = 'http://www.botequotes.com';" value="Visit Site" />
NOTE: JavaScript must be enabled in order to use 'onclick="location.href'
I have this code:
.button {
height: 50px;
width: 160px;
font-size: 16px;
background: #eee;
border-radius: 5px;
border: none;
}
<button type="button" class="button">Submit</button>
When I click into this button (button focus, active), the text will flicker (move to down a few point) on IE, Firefox browsers. How to fix it with CSS? Hope you help me. Thanks
Demo: http://jsfiddle.net/WorkWe/ht6pvoqz/1/
Wrap your text in span and give it position: absolute and it won't flick anymore!
<button type="button" class="button"><span>Submit</span></button>
.button {
height: 50px;
width: 160px;
background: #eee;
border-radius: 5px;
border: none;
margin: 0;
padding: 0;
position: relative;
}
span {
position: absolute;
top: 5px;
left: 5px;
}
Some sort of mini-reset does the job on FF, but using extra span inside the button resolves issue on IE. Looks like we need to start considering usage of "a" tags instead of buttons:
HTML:
<button name="button" class="button"><span>Submit</span></button>
CSS:
.button {
height: 50px;
width: 160px;
font-size: 16px;
background: #eee;
border-radius: 5px;
border: none;
}
button:active,
button:focus,
button:hover {
margin:0;
padding:0;
}
JSFiddle for that.
Hope this helps
UPDATE: There is a way of dealing with IE issue - based on this SO answer (#alicarn answer), but problem with this method is it creates opposite flickering on chrome. So I guess you need to pick up your poison in this case.
This is default behavior of IE. This can't be fixed I think.
Instead of using button tag, I suggest to use anchor tag.
I'd like to create a button that changes its style when it gets pressed. This is my CSS code:
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
<button>Button</button>
It is changed only when I click & hold on it. I want to make it change style after it's pressed. For example, normal state would be white, state while being clicked would be green and after click is released it would be red.
You can do this if you use an <a> tag instead of a button. I know it's not exactly what you asked for, but it might give you some other options if you cannot find a solution to this:
Borrowing from a demo from another answer here I produced this:
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:active {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
<a id="btn" href="#btn">Demo</a>
Notice the use of :target; this will be the style applied when the element is targeted via the hash. Which also means your HTML will need to be this: <a id="btn" href="#btn">Demo</a> a link targeting itself. and the demo http://jsfiddle.net/rlemon/Awdq5/4/
Thanks to #BenjaminGruenbaum here is a better demo: http://jsfiddle.net/agzVt/
Also, as a footnote: this should really be done with JavaScript and applying / removing CSS classes from the element. It would be much less convoluted.
You could use :focus which will remain the style as long as the user doesn't click elsewhere.
button:active {
border: 2px solid green;
}
button:focus {
border: 2px solid red;
}
Should we include a little JS? Because CSS was not basically created for this job. CSS was just a style sheet to add styles to the HTML, but its pseudo classes can do something that the basic CSS can't do. For example button:active active is pseudo.
Reference:
http://css-tricks.com/pseudo-class-selectors/ You can learn more about pseudo here!
Your code:
The code that you're having the basic but helpfull. And yes :active will only occur once the click event is triggered.
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
This is what CSS would do, what rlemon suggested is good, but that would as he suggested would require a tag.
How to use CSS:
You can use :focus too. :focus would work once the click is made and would stay untill you click somewhere else, this was the CSS, you were trying to use CSS, so use :focus to make the buttons change.
What JS would do:
The JavaScript's jQuery library is going to help us for this code. Here is the example:
$('button').click(function () {
$(this).css('border', '1px solid red');
}
This will make sure that the button stays red even if the click gets out. To change the focus type (to change the color of red to other) you can use this:
$('button').click(function () {
$(this).css('border', '1px solid red');
// find any other button with a specific id, and change it back to white like
$('button#red').css('border', '1px solid white');
}
This way, you will create a navigation menu. Which will automatically change the color of the tabs as you click on them. :)
Hope you get the answer. Good luck! Cheers.
You can do this with php if the button opens a new page.
For example if the button link to a page named pagename.php as, url: www.website.com/pagename.php the button will stay red as long as you stay on that page.
I exploded the url by '/' an got something like:
url[0] = pagename.php
<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?>
<html>
<head>
<style>
.btn{
background:white;
}
.btn:hover,
.btn-on{
background:red;
}
</style>
</head>
<body>
Click Me
</body>
</html>
note: I didn't try this code. It might need adjustments.
Maybe :active over :focus with :hover will help!
Try
button {
background:lime;
}
button:hover {
background:green;
}
button:focus {
background:gray;
}
button:active {
background:red;
}
Then:
<button onkeydown="alerted_of_key_pressed()" id="button" title="Test button" href="#button">Demo</button>
Then:
<!--JAVASCRIPT-->
<script>
function alerted_of_key_pressed() { alert("You pressed a key when hovering over this button.") }
</script>
Sorry about that last one. :) I was just showing you a cool function!
Wait... did I just emphasize a code block? This is cool!!!
So, I can create an input button with an image using
<INPUT type="image" src="/images/Btn.PNG" value="">
But, I can't get the same behavior using CSS. For instance, I've tried
<INPUT type="image" class="myButton" value="">
where "myButton" is defined in the CSS file as
.myButton {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a myButton:hover class). I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution.
I'm using Firefox 3.0.3 if that makes a difference.
If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.
Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.
You can use the <button> tag. For a submit, simply add type="submit". Then use a background image when you want the button to appear as a graphic.
Like so:
<button type="submit" style="border: 0; background: transparent">
<img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>
More info
div.myButton input {
background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
background-size: 90px;
width: 90px;
height: 90px;
cursor: pointer;
border: none;
}
<div class="myButton">
<INPUT type="submit" name="" value="">
</div>
This will work anywhere, even in Safari.
This article about CSS image replacement for submit buttons could help.
"Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input.
And since button borders are erased, it's also recommendable change the button cursor to
the hand shaped one used for links, since this provides a visual tip to the users."
The CSS code:
#replacement-1 {
width: 100px;
height: 55px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(image.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
#replacement-2 {
width: 100px;
height: 55px;
padding: 55px 0 0;
margin: 0;
border: 0;
background: transparent url(image.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
height: 0px;
}
Here's a simpler solution but with no extra surrounding div:
<input type="submit" value="Submit">
The CSS uses a basic image replacement technique. For bonus points, it shows using an image sprite:
<style>
input[type="submit"] {
border: 0;
background: url('sprite.png') no-repeat -40px left;
text-indent: -9999em;
line-height:3000;
width: 50px;
height: 20px;
}
</style>
Source:
http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/
Here is what worked for me on Internet Explorer, a slight modification to the solution by Philoye.
>#divbutton
{
position:relative;
top:-64px;
left:210px;
background: transparent url("../../images/login_go.png") no-repeat;
line-height:3000;
width:33px;
height:32px;
border:none;
cursor:pointer;
}
You can use blank.gif (a one-pixel transparent image) as the target in your tag:
<input type="image" src="img/blank.gif" class="button">
And then style background in CSS:
.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}
A variation on the previous answers:
I found that opacity needs to be set, of course this will work in Internet Explorer 6 and on. There was a problem with the line-height solution in Internet Explorer 8 where the button would not respond. And with this you get a hand cursor as well!
<div id="myButton">
<input id="myInputButton" type="submit" name="" value="">
</div>
#myButton {
background: url("form_send_button.gif") no-repeat;
width: 62px;
height: 24px;
}
#myInputButton {
background: url("form_send_button.gif") no-repeat;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
width: 67px;
height: 26px;
cursor: pointer;
cursor: hand;
}
I think the following is the best solution:
CSS:
.edit-button {
background-image: url(edit.png);
background-size: 100%;
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
HTML:
<input class="edit-button" type="image" src="transparent.png" />
My solution without JavaScript and without images is this:
HTML:
<input type=Submit class=continue_shopping_2
name=Register title="Confirm Your Data!"
value="confirm your data">
CSS:
.continue_shopping_2: hover {
background-color: #FF9933;
text-decoration: none;
color: #FFFFFF;
}
.continue_shopping_2 {
padding: 0 0 3px 0;
cursor: pointer;
background-color: #EC5500;
display: block;
text-align: center;
margin-top: 8px;
width: 174px;
height: 21px;
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: #919191;
font-family: Verdana;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #FFFFFF;
}
Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.
Let's assume you can't change the input type, or even the src. You only have CSS to play with.
If you know the height you want, and you have the URL of a background image you want to use instead, you're in luck.
Set the height to zero and padding-top to the height you want. That'll shove the original image out of sight, giving you a perfectly clean space to show your CSS background-image.
It works in Chrome. I don't have any idea if it works in Internet Explorer. Barely anything clever does, so probably not.
#daft {
height: 0;
padding-top: 100px;
width: 100px;
background-image: url(clever.jpg);
}
<input type="image" src="daft.jpg" id="daft">