How to properly hover and highlight buttons in CSS
I just started learning CSS and I made two buttons for practicing padding and margin mechanics. Now, I want to make the buttons a little large so that it pop ups. But, I dont want one button to push the other one to so that it can grow. I got it right for the save button but I cannot get it right for the other one.
.apply-button < margin-left: 20px; margin-right: 20px; background-color: rgb(10, 102, 194); color: white; border: none; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-radius: 120px; font-weight: bold; font-size: 17px; margin-top: none; cursor: pointer; transition: background-color 0.15s, color 0.15s, margin-left 0.15s, margin-right 0.15s, padding-left 0.15s, padding-right 0.15s, font-size 0.15s; >.apply-button:hover < margin-left: 13px; margin-right: 13px; padding-left: 22px; padding-right: 22px; padding-top: 11px; padding-bottom: 11px; font-size: 18px; background-color: rgb(0, 59, 122); color: rgba(255, 255, 255, 0.801); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.26); >.save-button < margin-left: 18px; margin-top: 50px; background-color: rgb(255, 255, 255); color: rgb(10, 102, 194); border-color: rgb(10, 102, 194); padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; border-radius: 40px; border-width: 2px; border-style: solid; font-weight: bold; font-size: 17px; cursor: pointer; transition: box-shadow 0.15s, margin-left 0.15s, padding-right 0.15s, padding-left 0.15s; >.save-button:hover < margin-left: 10px; background-color: rgba(87, 171, 255, 0.26); padding-left: 24px; padding-right: 24px; border-width: 3px box-shadow:0px 3px 10px rgba(0, 0, 0, 0.26); >.save-button:active
I tried to make the margins smaller with respect to the padding increasing as I hover. Theoritically it should work but the larger one is still pushing the other one as it enlarges. Again, i’m just starting out and there are probably other ways to do it. Thank you.reference video
CSS Highlighting buttons for «pushed» and «disabled» status
The following tutorial shows you how to use CSS to do «CSS Highlighting buttons for «pushed» and «disabled» status».
CSS Style
The CSS style to do «CSS Highlighting buttons for «pushed» and «disabled» status» is
input !-- w ww . d e m o 2 s . c o m --> display:none; > #button < border:3px solid #52A7D3; background-color:#52A7D3; color:#000000; > #input~#button:active, #input:checked~#button < background-color:grey; > #button < font:bold 11px Arial; text-decoration:none; background-color:#EEEEEE; color:#333333; padding:2px 6px 2px 6px; border:1px solid #999999; border-radius:3px; >
HTML Body
body> input type="checkbox" id="input"> label for="input" id="button">Push me The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> input !-- w w w . d e m o2 s .c o m --> display: none; > #button < border: 3px solid #52A7D3; background-color: #52A7D3; color: #000000; > #input ~ #button:active, #input:checked ~ #button< background-color: grey; > #button < font: bold 11px Arial; text-decoration: none; background-color: #EEEEEE; color: #333333; padding: 2px 6px 2px 6px; border: 1px solid #999999; border-radius: 3px; > body> input type="checkbox" id="input"/> label for="input" id="button">Push me Related
- CSS hide the dotted border in css for a button
- CSS Hide/unhide div with button
- CSS Highlight Button Dreamweaver CC
- CSS Highlighting buttons for «pushed» and «disabled» status
- CSS Hitting enter (return) key on a form with multiple submit buttons
- CSS How apply CSS to browse button
- CSS How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page)
demo2s.com | Email: | Demo Source and Support. All rights reserved.
CSS Button Highlight post click
I have three buttons in my view. I want the button to be highlighted not only during a click but post a click (unless another click is made). I know how to highlight the button on click but I want the highlight to last until a new click is made. Is there any way to do it??
Jquery version
Here is a fiddle that should do it in pure CSS. You will not be able to use actual buttons. But you can style the label as I have to look like buttons.
NOTE: This will not work properly in older browsers such as IE8
.ButtonState .Button .ButtonState:checked + .Button
Css — How to remove the default button highlighting in, To remove any highlight of inputs that any browser may apply as default action you can always use outline:none for their css. in your case it’s a button element. so this should work: button < outline: none; >Although it’s not recommended to remove the CSS outline. as it’s is bad for accessibility. (Thanks …
CSS to Highlight a Selected Button
I am trying to style code brought in by an app, so I don’t have the ability to adjust the HTML.
My goal was to turn a radio button input into a clickable button with the radio select option hidden. So far, I have accomplished this with the exception of highlighting the selected button. I can’t seem to figure out how to target the label when the radio button is checked as it is a parent of the input.
I’ve tried targeting the label with CSS and jQuery but neither have worked.
.bold_options input[type="radio"] < display: none; >.bold_options label < display: inline-block; float: left; min-width: 36px; height: $sw-height; /* No extra spacing between them */ margin: 0; /* Styling text */ font-size: 13px; text-align: center; line-height: $sw-height; white-space: nowrap; text-transform: uppercase; opacity: 0.8; display: flex; justify-content: center; align-items: center; font-weight: normal; border: 2px solid #C0C2BF !important; background-color: < < settings.color_swatches_btn >> ; color: < < settings.color_swatches_text >> ; background-position: center; padding: 0 10px; >.selected
When clicking on the button, the border color should change to highlight it is the selected button.
Based upon this: My goal was to turn a radio button input into a clickable button with the radio select option hidden. , I think this is what you are after:
$(document).ready(function() < $(".bold_option_value_element").parent().hide(); $(".bold_option_value").append('.bold_options input[type="radio"] < display: none; >.bold_options label < display: inline-block; float: left; min-width: 36px; height: $sw-height; /* No extra spacing between them */ margin: 0; /* Styling text */ font-size: 13px; text-align: center; line-height: $sw-height; white-space: nowrap; text-transform: uppercase; opacity: 0.8; display: flex; justify-content: center; align-items: center; font-weight: normal; border: 2px solid #C0C2BF !important; background-color: background-position: center; padding: 0 10px; >.selected
Look at this. I only needed to change the class names
.bold_option_value input[type="radio"] < display: none; >.bold_option_value label < display: inline-block; float: left; min-width: 36px; height: $sw-height; /* No extra spacing between them */ margin: 0; /* Styling text */ font-size: 13px; text-align: center; line-height: $sw-height; white-space: nowrap; text-transform: uppercase; opacity: 0.8; display: flex; justify-content: center; align-items: center; font-weight: normal; border: 2px solid #C0C2BF !important; background-color: lightblue; color: darkblue; background-position: center; padding: 0 10px; >label.selected-label
Webkit-tap-highlight-color — CSS: Cascading Style Sheets, There may also be large incompatibilities between implementations and the behavior may change in the future. -webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it’s being tapped. The highlighting indicates to the user that their tap is being …
How to make button stay highlighted after click on screen?
I have added two button in modal window in which one button is highlighted but when-ever i am going to click on screen it goes to normal.How can i make it stay highlighted. I am using following code:
#highlight, #highlight:hover, #highlight:active, #highlight:focus < color://any-color; // more css >NOTE : this is using the pseudo classes hover, focus and active, to keep the same style of the button unchanged when any event on the button occurs.
var yourbuttons = document.getElementsByClassName('highlight-hover'); for (var i = yourbuttons.length - 1; i >= 0; i--) < var currentbtn; yourbuttons[i].onclick=function()< if(currentbtn)< currentbtn.classList.remove("highlight"); >this.classList.add("highlight"); currentbtn=this; > >; There’s not really a css only method if you want the button to stay highlighted when you click another part of the screen. :active or :focus remove their styles when the element is not longer active or in focus
Here’s a working version of what it seems you want because i’m bored at work https://jsfiddle.net/mksty8eq/
When you click on one button it stays highlighted until another button is clicked
First setting autofocus inside modal will not work always. You should set focus on button via javascript. Refer http://getbootstrap.com/javascript/#modals . $(‘#myModal’).on(‘shown.bs.modal’, function () < $('#button3').focus() >)
:focus and :active are pseudo-classes that allows us to define specific CSS rules depending on state of the element. In bootstrap .active and .focus classes has same CSS style as :focus and :active . So add .active or .focus to the button that you want to highlight always.
CSS Button Highlight post click, Jquery version. function Highlight (button) < $ (".Highlight").removeClass ("Highlight"); $ (button).addClass ("Highlight"); >Here is a fiddle that should do it in pure CSS. You will not be able to use actual buttons. But you can style the label as I have to look like buttons. Code sampleButtonState
CSS Controlled Page Button Highlighting
Have you ever wanted to make the buttons on your webpages remain highlighted when they are clicked and active? I mean, wouldn’t it be great to use CSS to not only make your buttons and tabs change colour when hovered over but to give them a different appearance once they have been clicked?
The trick to changing the appearance of a clicked button or link and fixing that appearance for the time its page is active is to set a CSS style for the simultaneous occurrence of separate conditions. Don’t worry, it’s easy done than said.
Imagine we have two webpages and a menu that links to both pages; and all we want to do is ensure that whenever the link to Page One is clicked then the “Page One” tab changes from dark red to bright red and whenever the link to Page Two is clicked, the “Page One” tab returns to dark red and the “Page Two” tab becomes bright red. For example:
| STATE | MENU APPEARANCE | |
|---|---|---|
| Neutral | Page One | Page Two |
| Active Tab: Page One | Page One | Page Two |
| Active Tab: Page Two | Page One | Page Two |
To achieve our aim we must give three instructions to web browsers:
1. Whenever it is browsing Page One it must highlight the menu tab for “Page One”;
2. Whenever it is browsing Page Two it must highlight the menu tab for “Page Two”; and
3. It must not highlight tabs for pages it is not browsing.
The third item generally takes care of itself but the first two items require specific CSS instructions that are triggered by the co-incidence of two element IDs within the HTML of affected and effecting pages. To do this, we:
1. Assign an id to the tag, and
Remember that IDs are unique within a page so no two tags (elements) can have the same ID.
So we could have tags like these:
Our CSS would look like this: