CODEWITHSUNDEEP
css
Niranjan
Niranjan

Reputation: 587

How to write css classes as per the specification provided?

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:-

enter image description here

Hover:-

enter image description here

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

Upvotes: 0

Views: 67

Answers (3)

Chirag Patel
Chirag Patel

Reputation: 1642

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

Upvotes: 0

JoelBonetR
JoelBonetR

Reputation: 1572

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"/>

Upvotes: 0

Thum Choon Tat
Thum Choon Tat

Reputation: 3090

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"/>

Upvotes: 1

Related Questions