Better way to create Bootstrap Button

HTML & CSS
1

I am struggling to create a bootstrap that houses two different clickable buttons. The notion is simple, but challenging for me for some reason.

here is my CSS:


.img_style{

    float: right;
    height: 25px !important;
    width: 30px !important;
    padding: 2px 1px 2px 2px !important;
    margin-bottom: 0px !important;
}


.button_style{
    display: block;
    color:white;
    width: 50%;
    letter-spacing: 0.01rem;
    text-align: center;
    text-decoration: none;
    transition: all .16s ease;
    margin: 0 auto;
    padding:2%;
    background-color: #642F6C;
    line-height: 25px;
}

Here is my HTML:


<form action="https://clic-ctsa.org/sites/default/files/Twitter_101.pdf" target="_blank">

        <button class="button_style" >Review PDF <a href="*"><img class="img_style" src="/sites/default/files/download_icon_white.png"/></a></button>


</form>

Any suggestions are deeply appreciated.

Also, let me provide an image to make it clear as to what I am trying to accomplish:

I want the button to house to different clickable elements. Can anyone give any actual PRODUCTIVE advice?

2

Well, the first step in having two clickable buttons is… to put two buttons into your HTML code.

2 Likes
4

OK - now I’m confused.

Two buttons. Got that.

<form action="https://clic-ctsa.org/sites/default/files/Twitter_101.pdf" target="_blank">

        <button class="button_style" >Review PDF <a href="*"><img class="img_style" src="/sites/default/files/download_icon_white.png"/></a></button>


</form>

But only one button in the code?

And that edit seems to suggest you want one button to do two different (unspecified) things.

Please could you help out a Bear of Very Little Brain and provide some further clarification?

1 Like
6

Of course! Thank you for following up with questions about it rather than posting a careless comment.

I have seen buttons on the internet that give you the option to have two separate functions within the same button.

For example, in the image I have above of the button, I want the “Review PDF” part to take the user to a separate page to review the PDF (I’ve done that successfully in my website). BUT I want the icon to simply download the PDF immeadiately rather than perform the same action. I have tried multiple other options within the HTML, but I can’t seperate the two actions without the button element making it look like two different buttons.

Make sense?

Does it have to do with display property like what I’ve seen discussed here?

7

No, no drop down menu. Apparently I am not being clear. Please see the button image in my renewed response above for clarity.

8

You cannot do that with one button. How people usually do is actually with two buttons next to each other without any spacing.

2 Likes
9

Oh, I didn’t know that. I presumed it was all done in one button element.

So something like this?

            <form action="https://clic-ctsa.org/sites/default/files/Twitter_101.pdf" target="_blank">

                <button class="button_style">Review PDF </button>


            </form>
            <form>

                <a href="*"><img class="img_style" src="/sites/default/files/download_icon_white.png"/></a>
                
            </form>
11

If you just want to link to a page or PDF the <a> tag would be a lot easier, but yeah, like that.

12

No a button only has one action and cannot contain anchors either. Its like trying to put 2 links inside one link:)

Put 2 buttons together (bootstrap has an option for that) and then just add your own personal styling to them.

1 Like
14

What class or setup does boostrap use for what your suggesting? Anything would be deeply apprecaited. I’m burning alot of time to perform something so simple. AHHHHH

15

use a button group?

16

I tried doing something like a btn group as seen here.

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

The buttons don’t line up with each other when I try to use it. Is this a display:block-inline issue?

Wait, I am using Drupal and it’s putting <br> in my code without my initiative. The above code works fine now once I remove all spaces in my code. CMS editors really aren’t developer friendly sometimes!!

18

This is a good idea! But I cannot insert JS in my site since it’s a CMS (Drupal 7 to be exact).

19

Does this help :slight_smile:

22

YeS!!!
But how do you make one open a page with the a PDF file shown to you and the icon one, when clicked, download it directly without showing it to you??? I got this:


<div class="btn-group" >
             
 <button 
onclick="location.href='https://clic-ctsa.org/sites/default/files/Twitter_101.pdf'" 
target="_blank" 
type="button" 
class="btn btn-default button_style comms_page_buttons"> Review PDF 
</button>

<a 
href="https://clic-ctsa.org/sites/default/files/Twitter_101.pdf" 
type="button" class="btn btn-default img_style" 
style="padding: 3.5px;background-color:#411548;">
<img class="img_style" src="/sites/default/files/download_icon_white.png"/>
</a>

            </div>

But right now they both open a new window when I just want one to open a window to show the PDF while the other downloads a file directly. Make sense???

23

Research the html5 download attribute. It should do what you want in modern browsers.

Or you could turn one file into a zip and that will automatically download.

1 Like
24

that’s really useful i didn’t know that was available. Might have a use for that.

I googled it and found this to explain it https://webdesign.tutsplus.com/tutorials/quick-tip-using-the-html5-download-attribute--cms-23880

Thanks

25

I found a solution that works fine, thanks for all your help!

Dude, this was frustrating finding a solution for something so simple. I learned some important stuff though, here is my code that works fine::


                <div class="btn-group pdf-link" role="group" aria-label="Comms Page Buttons example">
                      <a href="my_PDF" class="btn btn-secondary" >Review PDF</a>
                      <a href="my_PDF" class="btn btn-secondary download" download>&dArr;</a>
                </div>
1 Like
26

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.