I have changed p-button styles on hover .
My problem is when the button state is set to disabled and I hover it the color changes also.
<button pButton type="submit" label="Launch #RT" class="ui-button-success color" [disabled]="groupList.length+ejList.length>0 ? false: true"></button>
Then in CSS:
.ui-button-success.ui-state-disabled, .ui-widget:hover:disabled, .ui-button-success.color{
background-color: white !important;
color: #00965E;
}
.ui-button.ui-button-success:hover
{
background-color: #00965E !important;
color: white;
}
How can I unchange button style when it's disable and I hover it. but when it's enable change color
Try to use :not() selector here with :hover
.ui-button-success {
background-color: white;
color: #00965E;
}
.ui-button-success:not([disabled]):hover {
background-color: #00965E;
color: white;
}
<button type="button" class="ui-button-success color" disabled>foobar</button>
<button type="button" class="ui-button-success color">foobar</button>
Related
how make button blur when it is disabled.
Is there any way to do it?
<button (click)="addRow()" class="add-row-btn" mat-button [disabled]="isDisabled"> Add Row</button>
You can achieve this with css:
button[disabled] {
filter: blur(2px);
}
Enabled button:
<button>Button</button>
<hr/>
Disabled button:
<button disabled="disabled">Button</button>
Click Me!
button:disabled {
background: #222;
color: #fff;
font-weight: 900;
padding: 15px 30px;
border-radius: 5px;
filter: blur(2px);
}
you can use the :disabled selector on the button class like the following:
HTML
<button class="add-row-btn" disabled="disabled" onclick="addRow()"> Add Row</button>
CSS
.add-row-btn:disabled {
background-color:orangered;
}
codepen https://codepen.io/ahamdan/pen/wvWKgqp
I have the following button:
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus"></i>
</button>
I would like to style the buttons text and the fa-icon with a different color. Both should be able to change the color when i hover over the button. Im able to do either of them but cant get both working at the same time:
I can style them differently:
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
This makes the text white and the icon green(Thats what i want). When i hover over the button, im now only able to change the texts color:
.btn:hover {
color: BLACK;
}
How can i change the icons color too if the button is hovered? I would like the text for example to be black and the icon to be white when the button is hovered. But im not able to achieve the latter.
You can use a rule to both the button inner text as well as the icon as following:
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
.btn:hover .fa,
.btn:hover{
color: red;
}
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus">+</i>
</button>
Your code means that you want to change button text on hover.
To do what you want, you should apply styles to your icon on button hover:
.btn:hover .fa.fa-plus {
color: RED;
}
So, in this case, you will apply styles to .fa.fa-plus, but on button hover.
Hope, it makes sense to you :)
Give a parent div for that button and add hover effect using that parent class
<style>
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
.hover:hover .btn, .hover:hover .fa.fa-plus{
color: BLACK;
}
</style>
<div class="hover">
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus"></i>
</button>
</div>
The below is an example of how to change the child via the parent :hover attribute, implement it according to how you wish to color the plus icon.
.btn:hover .fa.fa-plus {
color: red;
}
You can use this code to access the child element of hover:
.btn:hover . {
color: BLACK;
}
use this in each element one-by-one on your main page,
For an example:
div.e:hover {
background-color:red;
}
The code:
HTML
<button type="radio"/>
CSS
button:focus {
background: red;
}
When I click it in the mobile phone's browser, the style is not working.
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example
JS Fiddle
HTML
<div>
<button class="btn" type="button" name="button">
click
</button>
CSS
.btn {
color: #000;
background: red;
}
.btn:focus {
background: green;
}
Doesn't this solve your problem? CSS - :focus Not Working on iOS
<button onclick="this.focus()">Button</button>
I have a button with a default green background. On hover, the background color is changed.
When the button is clicked, I want it to fall back to the green background.
How do I achieve this? I tried the following without success:
.btn {
background-color: #4dd0e1
}
.btn:hover {
background-color: #01579b
}
.btn:active {
background-color: #4dd0e1
}
.btn:visited {
background-color: #4dd0e1
}
<i class="material-icons right">arrow_forward</i>button
Thanks!
.btn{
background-color: aqua
}
.btn:visited{
background-color: yellow
}
.btn:hover {
background-color: skyblue
}
.btn:active{
background-color: pink;
}
.btn:focus{
background-color: pink;
}
<a href="#" target="_blank" class="waves-effect btn"><i class="material-icons right">arrow_forward</i>button</a
You should follow this order when you write css code
a:link
a:visited
a:hover
a:active
a:focus
I don't know why, but it makes working your code.
You just change order of CSS Selectors (:visited, :hover, :active, :focus)
Use the following:
.btn:focus{
background-color: #4dd0e1
}
Use MaterializeCss colors helper clases
Materialize Colors
<a class="waves-effect waves-light btn amber darken-4">button</a>
Try this one~
<style>
.btn:hover{background-color: #b44ce1}
.btn{background-color: #b44ce1}
</style
<a class="waves-effect waves-light btn">Submit</a>
It works well for me~
I use a class named "save-button" to degsin buttons in some page its work perfect in other when hover on it button disapear !!
this is the class in SCSS page (i use foundation frame work):
.save-button,.comment-button
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/comment_save.png');
}
.exit-button,
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/chose_file.gif');
}
.login-button
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/login_.gif');
}
.send-message
{
background: url('../lib/foundation-sites/bower_components/foundation-sites/assets/images/send_mass.png');
}
.save-button:hover,
.exit-button:hover,.login-button:active,.login-button:focus,.login-button:hover,.comment-button:hover,.comment-button:focus,.comment-button:active,
,.send-message:hover,.send-message:focus,.send-message:active
{
outline:transparent;
background-color:transparent;
}
.exit-button,.save-button,.login-button,.comment-button,.send-message
{
background-repeat: no-repeat;
background-size:100% 100% ;
text-align:center;
color: white;
width:100%;
margin:0;
}
.comment-button
{
margin:0 0 1rem;
}
This is the implementaion in html page:
this OK:
<button type="button" class="button save-button" id="saveButton" onclick="OKSelectUserDialog()"><fmt:message key="confirm"/></button>
this disapear on hover:
<button type="button" class="button save-button" onclick="filter();"></button>
someone can help me? please......
Try this
.button.save-button:hover {
opacity: 0;
}
<button type="button" class="button save-button" onclick="filter();"></button>
I am considering that you are trying to say that you don't want your save button completely transparent on hovering the mous For this you can set opacity value.
For making not transparent at all
Do this
.save-button{
opacity:1;
}
<button type="button" class="button save-button" onclick="filter();">
</button
For completely transparent
Set opacity: 0;
Or use any other level between 0 to 1 to make it partially transparent.