Hi I am trying to write css classes as per the specification given. For example, If i am designing a button they have given specification as below.
Normal:-
Hover:-
Below is my html code which displays button.
<input type="button" class="btn" value="Button"/>
I want to write classes for the above button as per the specification provided. May i know how to write this? I have tried something below but correct me if i am wrong.
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
Also how can I write css for the hover as per the above specification provided? Any help would be appreciated. Thank you
Create another rule with :hover selector
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
.btn:hover {
background: rgb(46,146,250);
}
<input type="button" class="btn" value="Button"/>
Use CSS pseudo-selectors, also you can combine styles for multiple selectors (separated by coma)
/* styles for the element */
.btn {
background: rgb(12,116,218);
border: 1px solid #0C74Da;
border-bottom: rgb(0,76,151);
}
/* styling when on hover */
.btn:hover {
background: rgb(46,146,250);
border: 1px solid #2E92FA;
}
/* styles for both cases */
.btn, .btn:hover{
font-size: 13px;
color: white;
}
<input type="button" class="btn" value="Button"/>
You can write css as per below:
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
.btn:hover{
background: rgb(255,0,0);
}
.btn:active {
background-color: yellow;
}
.btn:visited {
color: black;
}
<input type="button" class="btn" value="Button"/>
For better documentation check this
Related
I want the input:valid effect to trigger at the outer div just as the
focus-within does. Is there any way?
.inputBox {
border-bottom: 1px solid #000;
transition: .3s;
}
input {
width: 80%;
border: none;
outline: none;
background: transparent;
}
.inputBox:focus-within,
input:valid {
border-bottom: 1px solid #fff;
}
<div class="inputBox">
<input type="email" id="email" required placeholder="E-mail" />
</div>
Try to use input without period in front of it. Because input is a tag and not the class unlike .inputBox
.inputBox {
border-bottom: 1px solid #000;
transition: .3s;
}
input {
width: 80%;
border: none;
outline: none;
background: transparent;
}
.inputBox:focus-within,
input:valid {
border-bottom: 1px solid #fff;
}
:has (which is yet to be implemented in browsers):
The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
.inputBox:has(> input:valid)
I know this is unhelpful to you now, but might be to others in the future.
Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:
<div class="plate eggs"></div>
<div class="plate bacon"></div>
but not:
<div class="plate"></div>
The code I have at the moment but I'm sure there's a way to combine the two rules?
.plate {
border: none;
&.eggs {
border: 1px solid red;
}
&.bacon {
border: 1px solid red;
}
}
SCSS:
.plate {
border: none;
&.eggs,&.bacon {
border: 1px solid red;
}
}
SASS:
.plate
border: none
&.eggs,&.bacon
border: 1px solid red
You can validate your styles in sassmeister.
Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]
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;
}
}
how is it possible to make one class inherit from another in the CSS file?
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:1px 6px 2px 6px;
cursor:pointer;
}
input.btn_light {
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
here I want input.btn_light to inherit from input.btn.. how is that possible to do in the CSS file?
#vadiklk
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:3px 6px 4px 6px;
cursor:pointer;
}
input.btn_light {
input.btn;
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
Give the HTML element both classes:
<input type="submit" class="btn btn_light" value="Action" />
According to: http://dorward.me.uk/www/css/inheritance/ it is not possible and needed.
As an alternative to the accepted answer, you can also do the following with your CSS. The difference being that instead of using multiple class names where it will be used, this way uses multiple class names in the CSS to say "use this style and this style". Then, the reference (the input button in this case) only uses one class name.
In the end, it accomplishes the same thing as the accepted answer.
Note: I changed the value of the borders because I wanted to use values that were less subtle for the snippet.
input.btn,
input.btn_light {
border: 2px solid red;
background: url('gfx/layout.btn_bg.png');
color: black;
font-weight: bold;
margin-right: 6px;
padding: 1px 6px 2px 6px;
cursor: pointer;
}
input.btn_light {
border: 2px solid green;
background: url('gfx/layout.btn_light_bg.png');
}
<body>
<input type="button" class="btn" value="Regular">
<br>
<input type="button" class="btn_light" value="Light">
</body>
SCSS/SASS example:
HTML
<h1><span class='section-title'>Some heading!</span></h1>
<h2><span class='section-title'>Some heading!</span></h2>
<h3><span class='section-title'>Some heading!</span></h3>
<h4><span class='section-title'>Some heading!</span></h4>
<h5><span class='section-title'>Some heading!</span></h5>
<h6><span class='section-title'>Some heading!</span></h6>
SCSS
// This will style every .section-title element within
// a heading the same as the heading.
.section-title {
h1 & { #extend h1; }
h2 & { #extend h2; }
h3 & { #extend h3; }
h4 & { #extend h4; }
h5 & { #extend h5; }
h6 & { #extend h6; }
}
Is it possible that when I move on the button mouse, change button styles?
When the cursor on the button, show this style:
input.button_p
{
color: #000000;
border-style: none;
}
When the cursor no't on the button, show this style:
input.button_a
{
color: #FFFFFF;
border-style:solid;
}
Thanks
You can use the :hover pseudo class, like this:
input.button_p {
color: #000000;
border-style: none;
}
input.button_p:hover {
color: #FFFFFF;
border-style:solid;
}
And the element just has the button_p class, like this:
<input type="button" class="button_p" />
input.button {
color: #000000;
border-style: none;
}
input.button:hover {
color: #FFFFFF;
border-style:solid;
}
Note that the :hover attribute in this usage isn't support by all of the browsers.. But it is supported in enough of them to not worry about it.
<input type="submit"> and <input type="button"> are not styleable on all browsers. You should be using <button type="submit">text</button> instead.