I added a button code from bootstrap which goes like this:
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Start Javascript
</button>
due to this code button color is red and i want to change that into orange for that i added a css file and linked that with html which goes like this:
.btn btn-danger {
background-color: orange;
}
but still color of button is red insted of orange
Correct CSS rule is
.btn.btn-danger {
background-color: orange;
}
Related
I have a button and trying to give to style properties for it in the same html statement but not getting the correct output.
<button style="color:yellow" style="background-color:blue" type="button" onclick="alert('Hello world!')">Click Me!</button>
I want to give text color as yellow and background color as blue in this html code only without using any kind of css. How should I do it?
You need to keep all of your style properties in a single tag and separate them with semi-colons.
<button style="color:yellow; background-color:blue;" type="button" onclick="alert('Hello world!')">Click Me!</button>
You should use style only once. Use a semicolon between each properties.
<button style="color:yellow; background-color:blue;" type="button" onclick="alert('Hello world!')">Click Me!</button>
another way is to assign a class to it and enter the required values there
<button class="btn" type="button">Click Me</button>
then in its css file
.btn{
background-color:blue;
}
Try this one:
.BtnStyle
{
color:yellow;
background-color:blue;
font-size:30px;
}
<button class="BtnStyle" type="button" onclick="alert('Btn Class Style Sample!')">Please Click!</button>
I want to apply different button styles in my view from my declared global button styles in theme/variables.scss
button_green{}
button_red{}
in my login.html
<button>Login</button> //should be green
<button>Logout</button> //should be red
How to assign different global styles to buttons without having individual component specific styles like
<button color='primary' font='xyz' size='n'>Login</button>
<button color='danger' hint='something'>Logout</button>
and more like this
<button style='button_green'>Login</button>
<button style='button_red'>Logout</button>
To use custom button style, You can follow my instruction below:
1- As you want to create global style, you need to add your style class in /theme/variables.scss as below:
Note: You need to add !important to overwrite default ionic style.
.button_green{
background-color: green !important;
}
.button_red{
background-color: red !important;
}
.button_blue{
background-color: blue !important;
}
.button_yellow{
background-color: yellow !important;
}
.button_pink{
background-color: pink !important;
}
.button_purple{
background-color: purple !important;
}
2- Then in *.html, you can call your css class like this:
<button ion-button class='button_green'>button_green</button>
<button ion-button class='button_red'>button_red</button>
<button ion-button class='button_blue'>button_blue</button>
<button ion-button class='button_yellow'>button_yellow</button>
<button ion-button class='button_pink'>button_pink</button>
<button ion-button class='button_purple'>button_purple</button>
3: As result you can see:
You can find full source code with this repository: Ionic Button Custom Collor.
I hope this will help you :)
If you want a custom button colors you can use below code -
1 - Declare below code in your CSS class
.font-size{
font-size : 2vw;
}
.red{
background-color: red ;
}
.blue{
background-color: blue ;
}
.green{
background-color: green ;
}
.yellow{
background-color: yellow ;
}
2.
<button ion-button class="font-size red">red</button>
<button ion-button class="font-size blue">blue</button>
<button ion-button class="font-size green">green</button>
<button ion-button class="font-size yellow">yellow</button>
Note - You can also use one class with another class
Similar to the classic bootstrap disabled state -
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
I'd like to simulate a disabled state on an Angular Materials svg icon using cursor: not-allowed css. But I want to disable the click event.
.toolbar-icon-disabled {
fill: gray;
cursor: not-allowed;
pointer-events: none;
}
<mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon>
Problem here is that I CANNOT use both not-allowed and pointer-events: none, as they appear to be mutually exclusive.
ex/ Here you can see that my left-most icon appears disabled, as the fill color is gray; however, it's still clickable if I add cursor: not-allowed.
I couldn't copy/paste the not-allowed circle from my screen, but here's an example:
Suggested work around:
1) Put the mat-icon in another anchor tag and add curson not allowed to that anchor.
HTML:
<a [class.linkDisabled]="true"><mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon></a>
CSS:
.toolbar-icon-disabled {pointer-events: none;}
.linkDisabled {cursor: not-allowed;}
2) keep the 'cursor: not-allowed;' in the css and i am assuming that there will be an event listener on the icon to do some action. Go into that method, check for the disabled condition and return if true. For example:
html:
<mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="flgDisabled" (click)="onClick()"></mat-icon>
method:
onClick() {
if(this.flgDisabled) {
return
}
console.log('called');
}
On my site I have a disabled button. After hover event it changes a color for a wrong one.
I want to change a hover colour for this button and I can't find / don't know what is a class name disabled button hover in the bootstrap framework for this issue.
Exmaple is:
<button type="submit" class="btn btn-primary" disabled="disabled">My disabled button</button>
These are the two types of disabled button you can make with bootstrap:
1.Disabled UI, but not the button itself [use the class disabled] (try clicking the button in the snippet)
2.Button disabled | Bootstrap applies the disabled effect here by default. [or use both: the attribute and the disabled class].
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="submit" class="btn btn-primary disabled" onclick="alert('not actaully disabled');">My disabled button</button>
<button type="submit" class="btn btn-primary" disabled onclick="alert('not actaully disabled');">My disabled button</button>
.btn-default[disabled] {
background: #ccc !important;
}
.btn-default[disabled]:hover {
background: #ccc !important;
}
I'm using this.
Thank you for your help.
I've found right class name for this issue.
Just put
.btn[disabled]:hover {
background:#bedd16;
}
.btn[disabled]:active:focus {
color: #000000;
}
.btn[disabled]:focus {
background: #bedd16;
color: #666666;
}
for change a disabled button hover backgroud ... ;)
Bootstrap have disable class in button
you can use like this
<input type="submit" class="btn btn-default" disabled>
CSS
input[disabled] {
cursor:not-allowed;
}
No any javascript need for button disable.
I want btn in navbar (which appeared only toggled) get btn-info color.
I add a btn-info class,
btn's text color changed to white
and btn color was unchanged.
I used default bootstrap 3 css.
bootply - click mobile view
<a class="btn btn-info navbar-toggle" value="Page" href="javascript:win_memo('', '<?=$member[mb_id]?>', '<?=$_SERVER[SERVER_NAME]?>');" onfocus="this.blur()">
<i class="glyphicon glyphicon-envelope"><sup style="margin-left:3px;"><?=$member[mb_memo_unread]?></sup></i>
</a>
you need to use ( !important ) for your btn-info property value, because the (.btn-info)
is overridden by the (.navbar-toggle) class value, so the solution is to add this code to your custome.css file or any file that you use to override the main bootstrap.css file.
code:
.btn-info {
color: #fff;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
hope this will help you.
Ahmed Na's Answer works well. Great idea.
I add a class btn-info-navbar.
.btn-info-navbar {
color: #fff;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
and add btn-info-navbar.
<a class="btn btn-info btn-info-navbar navbar-toggle" value="Page" href="javascript:win_memo('', '<?=$member[mb_id]?>', '<?=$_SERVER[SERVER_NAME]?>');" onfocus="this.blur()">
<i class="glyphicon glyphicon-envelope"><sup style="margin-left:3px;"><?=$member[mb_memo_unread]?></sup></i>
</a>