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!!!
Related
I have two sets of buttons. The first set is for navigation, the second set is for download and info.
The first set works fine, the second set works fine too, but I can't get these buttons to change when I hover over them.
Here is the code I used for the second set (this set is used with book covers):
.book_covers li .btn1,
ul li .btn2{
border-radius: 10px;
background-color: #E77600;
cursor: pointer;
width: 41%;
height: 22.5%;
padding: 0%;
float: left;
text-decoration: none;
color: #fff;
text-align: center;
font-size:80%;
cursor:pointer;
-webkit-box-shadow: inset 1px 1px 5px 2px #733B00;
box-shadow: inset 1px 1px 11px 2px #733B00;
-webkit-transition-duration:0.4s /*safari*/
transition-duration: 0.4s;.book_covers li .btn1 {
margin:0% 2% 4% 6%;
}
.book_covers li .btn2{
margin:0 5% 5% 1.5%;
}
.book_covers li .btn1 :hover {
background-color: #FFF;
color: #666;
}
.book_covers li .btn2 a:hover {
background-color: #FFF;
color: #666;
}
The page where they are used is: [link] (http://www.hoddenbagh.nl/bibleopen/subjects_eBooks.html)
Thanks guys for your responces, but I found the solution how to handle this:
.book_covers li .btn1:hover {
background-color: #FFF;
color: #000;
}
.book_covers li .btn2:hover {
background-color: #FFF;
color: #000;
}
Use 'onmouseover' event handler to get it done.
A simple example would be changing the color on moving the mouse over a button.
<button id="buttonone" type="button" onmouseover="changecolor()">Click Me!</button>
<script type="text/javascript">
function changecolor()
{
document.getElementById("buttonone").setAttribute("color","red");
}
</script>
This would change the button text color to red on hovering the mouse over the button.
Using css and js!
function changecolor()
{
document.getElementById("buttonone").setAttribute("class","somenewvalue");
}
Then use .somenewvalue in the css stylesheet to give it the required effects .somenewvalue { color:red; }
Otherwise,using the onmouseover eventhandler, you could remove the previous button and create a new button with new attributes. This can be done using the DOM functions.Add effects to the newly created button using either its 'id' or 'class' in the stylesheet. If you have so many buttons in your website(not at one place or page),then it would be better to use css alone. Js and css together would be a good choice if the effects for different buttons on your site are gonna be different. Again,if you have a lot of buttons,css alone is better. I ain't sure about how to do it with css alone.
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.
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 have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox.
I have the following code in my css file:
.error input, .error select, .error textarea {
border-style: solid;
border-color: #c00;
border-width: 2px;
}
Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
And this might be irrelevant at the css code above is active but I do have something else in my css file:
input[type=checkbox] {
background:transparent;
border:0;
margin-top: 2px;
}
And that is used so that the checkboxes are displayed correctly in IE8 and less.
Any ideas how I can visualize the red border in Chrome?
EDIT:
Here's a jsfiddle:
http://jsfiddle.net/PCD6f/3/
Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):
input[type=checkbox] {
outline: 2px solid #F00;
}
Here's the jsFiddle
Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.
For a completely custom styled checkbox, see this jsFiddle from this Gist.
EDIT Play with: outline-offset: 10px;
Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.
JSFiddle Link here
input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}
/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
Works for me.only outline doesn't work.
input[type=checkbox].has-error{
outline: 1px solid red !important;
}
I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:
http://jsfiddle.net/krishnathota/xzBaZ/1/
In the example there are no images, I'm afraid.
I'm trying to:
Change the background-color of the button when it is disabled
Change the image in the button when it is disabled
Disable the hover effect when disabled
When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
The text on the button can be selected. I want to avoid that, too.
I tried doing in button[disabled]. But some effects could not be disabled. like
top: 1px; position: relative; and image.
For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).
For browsers/devices supporting CSS2 only, you can use the [disabled] selector.
As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.
Selection problem: here is a link to the specific question:
How to disable text selection highlighting
Example for the disabled selector:
button {
border: 1px solid #0066cc;
background-color: #0099cc;
color: #ffffff;
padding: 5px 10px;
}
button:hover {
border: 1px solid #0099cc;
background-color: #00aacc;
color: #ffffff;
padding: 5px 10px;
}
button:disabled,
button[disabled]{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
div {
padding: 5px 10px;
}
<div>
<button> This is a working button </button>
</div>
<div>
<button disabled> This is a disabled button </button>
</div>
I think you should be able to select a disabled button using the following:
button[disabled=disabled], button:disabled {
// your css rules
}
Add the below code in your page. No changes made to button events, to disable/enable the button simply add/remove the button class in JavaScript.
Method 1
<asp Button ID="btnSave" CssClass="disabledContent" runat="server" />
<style type="text/css">
.disabledContent
{
cursor: not-allowed;
background-color: rgb(229, 229, 229) !important;
}
.disabledContent > *
{
pointer-events:none;
}
</style>
Method 2
<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />
<style type="text/css">
.btn-disable
{
cursor: not-allowed;
pointer-events: none;
/*Button disabled - CSS color class*/
color: #c0c0c0;
background-color: #ffffff;
}
</style>
By CSS:
.disable{
cursor: not-allowed;
pointer-events: none;
}
Them you can add any decoration to that button.
For change the status you can use jquery
$("#id").toggleClass('disable');
To apply grey button CSS for a disabled button.
button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
border: 2px outset ButtonFace;
color: GrayText;
cursor: inherit;
background-color: #ddd;
background: #ddd;
}
consider the following solution
.disable-button{
pointer-events: none;
background-color: #edf1f2;
}
For all of us using bootstrap, you can change the style by adding the "disabled" class and using the following:
HTML
<button type="button"class="btn disabled">Text</button>
CSS
.btn:disabled,
.btn.disabled{
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
Remember that adding the "disabled" class doesn't necessarily disable the button, for example in a submit form. To disable its behaviour use the disabled property:
<button type="button"class="btn disabled" disabled="disabled">Text</button>
A working fiddle with some examples is available here.
When your button is disabled it directly sets the opacity. So first of all we have to set its opacity as
.v-button{
opacity:1;
}
Need to apply css as belows:
button:disabled,button[disabled]{
background-color: #cccccc;
cursor:not-allowed !important;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
// apply css here what u like it will definitely work...
}
And if you change your style (.css) file to SASS (.scss) use:
button {
background-color: #007700;
&:disabled {
background-color: #cccccc;
}
}