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
Related
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 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>
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.
If I have a button with an image inside of it how can I activate the image hover when the cursor is hovered over the button but not the image itself?
This is what I have so far:
<button type="button" class="btn btn-normal"><img src="images/contents/123.png"onmouseover="this.src='images/contents/123-hover.png'" onmouseout="this.src='images/contents/123.png'" class="image" /></div>
css:
.btn-normal {
background-color: #eee;
padding: 15px!important;
width: 250px;
margin-bottom:20px;
}
.btn-normal:hover {
background-color: #ddd;
}
.image {
background-color: #ccc;
}
.image:hover {
background-color: #009fe3;
}
Really at a loss with this - any help is appreciated!
try this
HTML file
<html>
<body>
<script type="text/javascript">
function mouseoverImage()
{
document.getElementById('img').src='images/contents/123-hover.png';
}
function mouseoutImage()
{
document.getElementById('img').src='images/contents/123.png';
}
</script>
<button class="btn btn-normal" onmouseover="mouseoverImage()" onmouseout="mouseoutImage()"><img id="img" class="image" src="images/contents/123.png"/></div>
Think I've figured it out with css... I'm thinking background-image: on the button should work. Hopefully!...
As suggested by #Henrik in the comments above, .btn:hover .image selector should work for you. I have created a simple fiddle with your code. I have added a border style to the image element on hover of btn. And it works.
.btn:hover .image{border:1px solid red;}