How to create a container/palette for my buttons in Angular 8?

Question

I want to create a container/palette(I don't know really what to call it) for som of my buttons in my webpage to put them into it and change their background color and some other effects.

You can see what I mean in the following picture where there are 3 buttons(Question, Action, Output) in left bar of the page:

score 1 · Accepted Answer · edited Dec 01 '19 at 11:30

You can put the buttons in a tag (the parent tag), and apply some style to the parent, like:

.button-box {
 height: 100vh;
 background: #3a8484;
 width: 10vw;
 padding: 10px;
 border-radius: 3px;
}

button {
 background-color: rgb(2, 70, 70);
 border-radius: 10px;
 padding: 5px;
 color: #fff;
 border: 1px solid rgb(2, 70, 70);
 width: 100%;
 display: block;
 margin-bottom: 5px;
}

<div class="button-box">
   <button>Question</button>
   <button>Action</button>
   <button>Output</button>
</div>

score 0 · Answer 2 · answered Dec 01 '19 at 11:03

0

did you mean that you want to apply some style to each button(Question, Action, Output)?

<button>Question</button>
<button>Action</button>
<button>Output</button>

button{
    background-color: rgb(2, 70, 70);
    border-radius: 10px;
    padding: 5px;
    color: #fff;
    border: 1px solid rgb(2, 70, 70);
    width: 10%;
  }

answered Dec 01 '19 at 11:03

ro.sadeghi

26
3

No, not for each button separately, but one container for all of them like the picture I put. – Hasani Dec 01 '19 at 11:07
The photo I put above is not mine, but I like to create something like that in my app. – Hasani Dec 01 '19 at 11:11

How to create a container/palette for my buttons in Angular 8?

2 Answers2