24

I'm pretty new to CSS and have been finding my way around so far. I am creating these button like links with shadows and stuff. Now there are several such buttons required on the site - everything about the buttons is same - except few properties change like width and font size.

Now instead of copying the same code - over and over for each button - is there a way of extending the button and adding just the properties that change.

Example of two buttons - css

.ask-button-display {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}


.ask-button-submit {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
font-weight: bold;
width:75px;
font-size: 12px;
padding: 1px;
}

And this is how I'm currently using it in my html

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

So I'm wondering if there is a cleaner way to do this - like

.button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}

AND THEN SOMEHOW EXTEND IT LIKE
.button #display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}

.button #ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

But I'm not sure how to do this. Thanks for your inputs

0

8 Answers 8

24

You can add multiple classes to one element, so have one .button class which covers everything, then a .button-submit class, which adds things in.

For example:

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button-submit {
    background-color: green;
}​

See a live jsFiddle here

In your case, the following should work:

.button {
    background: #8BAF3B;
    border-radius: 4px;
    display: block;
    letter-spacing: 0.5px;
    position: relative;
    border-color: #293829;
    border-width: 2px 1px;
    border-style: solid;
    text-align:center;
    color: #FFF;
    width:350px;
    font-size: 20px;
    font-weight: bold;
    padding:10px;
}


.button-submit {
    width:75px;
    font-size: 12px;
    padding: 1px;
}​

See a live jsFiddle here

1
  • 3
    How does one extend .something button? I tried .something button-foo with class='button-foo', did not work.
    – raffian
    Dec 9, 2013 at 4:27
18

You might want to try this:

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button.submit {
    background-color: green;
}
.button.submit:hover {
    background-color: #ffff00;
}

This way you avoid repeating the word and will able to use the classes in the elements like this:

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a>

See the example in JSFiddle (http://goo.gl/6HwroM)

7

Rather than repeat the common "Add a button class to the element" answer I'm going to show you something new in the weird and whacky world of new age CSS, or better known as SCSS!

This reuse of code in stylesheets can be achieved with something called a 'Mixin'. What this allows us to do is reuse certain styles by using the '@include' attribute.

Let me give you an example.

@mixin button($button-color) {
    background: #fff;
    margin: 10px;
    color: $color;
}

and then whenever we have a button we say

#unique-button {
    @include button(#333);
    ...(additional styles)
}

Read more here: http://sass-lang.com/tutorial.html.

Spread the word!!!

1
  • 4
    worth mentioning that saas is not supported natively
    – Sebas
    May 10, 2016 at 21:36
4

You can do this since you can apply more than one class to an element. Create your master class and and other smaller classes and then just apply them as needed. For example:

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

This would apply the button and submit classes you would create while allowing you to also apply those classes separately.

Modify your code example along the lines of:

.master_button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button_display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button_ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

And apply like:

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a>
0
2
.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}
2

You may want to look into Sass. With Sass you can basically create variables in your css file and then re-use them over and over. http://sass-lang.com/ The following example was taken from Sass official website:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
1
  • This is nice, but there is no native support for it. Nov 19, 2018 at 14:21
1

Add a button class to both links for the common parts

.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
}

Keep in your other classes the rules that aren't common.

And your HTML will be

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a>
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a>
0

Without changing/ adding new classes you can add styles to all elements with a class name starting with "ask-button"... (whatever the elements with the class are; button, anchor, div etc.) let's say your buttons are divs then:

 div[class^="ask-button"] {
   // common css properties
 }

You can also list all classes that will have common properties like this:

.ask-button-display,
.ask-button-submit {
   // common css properties here
}

And then you add the separate styling for each button:

.ask-button-display{
    // properties only for this button
    }

.ask-button-submit {
   // properties only for this button
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.