CSS How to add custom button in current theme?

Question

I'm using Mobix theme, and I need to add some custom button.

http://sindevo.com/mobix/#!/blog.html

What I want is something like this picture actually the three button Green, Yellow, and Purple.

This theme based on Framework7 but I can't find how I can do like what I want.

So far I add this code

<div style="position:absolute;">
<a href="#" class="button button-fill color-blue">Tes A</a>
</div>

after <div class="post_title">.....</div> and here is the result.

Just trying sindevo answer but still the same.

                      <div class="post_entry">
                      <div class="post_date">
                        <span class="day">#{{ $queue->id}}</span>
                      </div>
                      <div class="post_title">
                      <h2><a href="{{ route('operator.antrian.show', $queue->id )}}">{{ $queue->no_kendaraan }}</a></h2>
                      </div>
                      <div class="buttons_container">
                        <a href="#" class="button button-fill color-green" style="width:15%;">Tes A</a>
                        <a href="#" class="button button-fill color-yellow" style="width:15%;">Tes B</a>
                        <a href="#" class="button button-fill color-purple" style="width:15%">Tes C</a>
                      </div>
                  </div>

Here is my css

.post_title{
width:15%;
float:left;
margin:0 0 0 10%;
}
.buttons_container{
  width: 50%;
  float: left;
  margin: 0 0 0 5%;
}

Anyway there is no margin in my button, but its fill the entire block. What's wrong with my code?

Answer 1

//use table and then place the button (button class="form_submit") as u need in table section

<ul class="responsive_table">
                 <li class="table_row">
                    <div class="table_section_14">&nbsp;</div>
                    <div class="table_section_14">Medium</div>
                    <div class="table_section_14">Business</div>
                    <div class="table_section_14">Deluxe</div>  
                 </li>
                  <li class="table_row">
                    <div class="table_section_14">&nbsp;</div>
                    <div class="table_section_14">Medium</div>
                    <div class="table_section_14">Business</div>
                    <div class="table_section_14">Deluxe</div>  
                 </li></ul>

Answer 2

Here is the structure of a blog posts code:

<div class="post_entry">
    <div class="post_date">
        <span class="day">24</span>
        <span class="month">january</span>
    </div>
    <div class="post_title">
        <h2><a href="blog-single.html">Sed ut perspiciatis unde omnis iste accusantium.</a></h2>
    </div>
</div>

You need to:

1. In style.css make the post_title smaller in width

.post_title{
    width: 80%;
    float: left;
    margin: 0 0 0 10%;
}

Let's say width:50%;

2. Then build a new DIV container with your buttons

<div class="buttons_container"></div>
    <a href="#">button</a>
    <a href="#">button</a>
    <a href="#">button</a>
</div>

3. In style.css add

.buttons_container{
    width: 25%;
    float: left;
    margin: 0 0 0 5%;
}

4. Make sure the total amount of your blocks that are in that line do not pass 100%.

This requires basic CSS knowledge.

Regards.

Answer 3

Make sure your .button class in CSS have float left.

Your 3 buttons should have float left in order to stay one after eachother.