I am trying to make a button that links to another app when you click it.
For some reason, this works:
Find a ride
But this does not:
<button type="button" class="btn btn-xl" style=" border-color: rgb(2,132,69); background-color: rgb(2,132,69); color: rgb(246,246,247); font-family: Verdana;font-size: large" href="{% url 'ridesharing:ride-list' %}">Find a ride</button>
I am using a button because I like how I can customize how it looks. How do I get the button to link to the right app.
Either have the button submit a form with the URL as the action of the form
<form action="{% url 'ridesharing:ride-list' %}">
<button type="submit" class="btn btn-xl" style=" border-color: rgb(2,132,69); background-color: rgb(2,132,69); color: rgb(246,246,247); font-family: Verdana;font-size: large">Find a ride</button>
</form>
or add an event listener/handler that changes the window.location.href
<button type="button" class="btn btn-xl" style=" border-color: rgb(2,132,69); background-color: rgb(2,132,69); color: rgb(246,246,247); font-family: Verdana;font-size: large" onclick="window.location.href='{% url 'ridesharing:ride-list' %}'">Find a ride</button>
Related
How can I input a link in the button when I press the button?
<div class="buttons">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</div>
Also you can trigger a link by JavaScript.
<button
onclick="window.location(this.getAttribute('data-link'))"
data-link="/hello">go to hello</button>
One way could be to use an anchor tag instead of the button and make it look like a button.
HTML:
<div class="buttons">
<a class="btn custom-btn position-bottom-right"> Add to cart</a>
</div>
CSS:
.custom-btn {
border: medium dashed green;
}
Alternatively, you could do:
<button class="btn custom-btn position-bottom-right" onclick="location.href='yourlink.com';"> Add to Cart </button>
Try this:
<a href='http://my-link.com'>
<button class="GFG">
Click Here
</button>
</a>
You can use the anchor tag and provide a Bootstrap class for the button, like,
<a class="btn btn-success" href="link"> Add to Cart</a>
If the label "Add to cart" matches the expectations, we'd be talking about a form. A form that causes an element to be added typically uses the POST method:
<form class="buttons" method="post" action="/path/to/add/to/cart/script">
<input type="hidden" name="product" value="123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Alternatively, there's GET as well:
<form class="buttons" method="get" action="/path/to/add/to/cart/script?product=123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Since GET doesn't carry additional payload, you'll get the same effect with a regular anchor:
Add to cart
You don't want search engine spiders to populate carts, so you typically leave GET for data fetching.
Html code:
<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button type="button" class="btn btn-sm btn-primary product-btn" (click)="addCard()">Add Card</button>"
Here I also want to bind the value "card.color" into another variable (maybe using ngModel) so that I can use it inside my typescript file in angular 8.
I tried the below but not working:
<p class="card-text" [(ngModel)]="cardColor">Card Color: {{card.color}}</p>
You could send the contents to the button click event's handler.
Template (*.html)
<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button
type="button"
class="btn btn-sm btn-primary product-btn"
(click)="addCard(card.color)"
>
Add Card
</button>
Controller (*.ts)
addCard(color: any) {
// use `color` here
}
When my answer choices go to two lines I get a lot of space in between each sentence in my button tag. I 've tried setting the
display:block;
float:left;
which didn't work. What I want to happen is that when the button gets more then one line, there is reduced space in between the sentences. Here is my code and my snippet.
P.S I know I have a lot of inline CSS. This is due to the application I am using called Ionic Creator which puts them their.
Image snippet
HTML
<div class="answer-div">
<button style="font-weight:700;color:#32575E;font-size:28px;margin-left:15%;" id="a_one" value="" class="button button-royal button-large button-outline answer-choices"></button>
<button style="font-weight:700;color:#32575E;font-size:28px;margin-left:4%;" id="a_two" value="" class="button button-royal button-large button-outline answer-choices"></button>
<div class="spacer" style="width: 602.391px; height: 26px;"></div>
<button style="font-weight:700;color:#32575E;font-size:28px;margin-left:15%;" id="a_three" value="" class="button button-royal button-large button-outline answer-choices"></button>
<button style="font-weight:700;color:#32575E;font-size:28px;margin-left:4%;" id="a_four" value="" class="button button-royal button-large button-outline answer-choices"></button>
<div class="spacer" style="width: 602.391px; height: 41px;"></div>
<button style="font-weight:500;font-size:28px;" id="submit" value="" class="button button-royal button-large button-block submit">SUBMIT</button>
<button style="font-weight:500;font-size:28px;" id="correct" class="button button-royal button-large button-block submit">CORRECT!</button>
<button style="font-weight:500;font-size:28px;" id="submit-fake" class="button button-royal button-large button-block submit active"></button>
<button style="font-weight:600;color:#FFFFFF;font-size:36px;" id="maggies_drawers" class="button button-assertive button-large button-block maggies_drawers">MAGGIE'S DRAWERS</button>
</div>
CSS
.answer-choices {
width: 35%;
height:29%;
border: solid 1.5pt #32575e;
margin: 0;
padding: 0;
}
Add a small line-heightsetting, like line-height: 1 or even less (0.9 in my example snippet):
.answer-choices {
border: solid 1.5pt #32575e;
margin: 0;
padding: 20px;
line-height: 0.9;
width: 240px;
}
<button style="font-weight:600;color:#333;font-size:36px;" class="answer-choices">MAGGIE'S DRAWERS</button>
Have you tried setting the line-height property of the element in question to something smaller?
Off the top of my head sounds like you need to set the line-height property in the CSS. https://www.w3schools.com/cssref/pr_dim_line-height.asp
Example: line-height: 1.4;
i am working on my html php game and i have a button design what do not contain button HTML tag. But i want to give it a button functionality.
Here is HTML code of button what works and do a function to reset time for specific amount of game gold.
<form action="game.php?page=buildings" method="post" class="build_form">
<input type="hidden" name="queuetype" value="1">
<input type="hidden" name="cmd" value="fast">
<button type="submit" class="build_submit onlist tooltip" data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}" style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="" width="16" height="16">
</button>
</form>
And here is my new button style witch i need to apply the same function as i have set for the button before this.
<tr class="data">
<td colspan="2">
<a class="build-faster dark_highlight building disabled">
<div class="build-faster-img" alt="Reset time"></div>
<span class="build-txt">Reset time</span>
<span class="dm_cost overmark">{if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if} AM</span>
<span class="order_dm">Purchase with gold</span>
</a>
</td>
</tr>
Can someone please tell me what should i do in my case and is it even possible ?
Or i need to use only button tag ?
For semantic reasons (which help a lot of users who rely on screen readers and other assitive technologies), you really should use a <button>, but you can do what you want by simply applying a click event handler to the "fake button" and in that handler, you manually call the submit event of the form.
As a side note, you should definitely not be using a table for this. Tables are for tabular data rendering, not for layout.
var form = document.querySelector("form");
var fakeSubmit = document.getElementById("fakeSubmit");
fakeSubmit.addEventListener("click", function(){
form.submit();
});
#fakeSubmit {
border:1px solid #a0a0a0;
border-radius:1px;
padding:2px 5px;
background-color:#f0f0f0;
cursor:pointer;
box-shadow:1px 1px 1px rgba(0,0,0,.5);
}
#fakeSubmit:hover, #fakeSubmit:active {
box-shadow:-1px -1px 1px rgba(255,255,255,.5);
}
<form action="game.php?page=buildings" method="post" class="build_form">
<input type="hidden" name="queuetype" value="1">
<input type="hidden" name="cmd" value="fast">
<button type="submit" class="build_submit onlist tooltip"
data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}"
style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="some image" width="16" height="16">
</button>
<div id="fakeSubmit" class="build_submit onlist tooltip"
data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}"
style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="some image" width="16" height="16">
</div>
</form>
I would hide a buttons except the last one . But when I put mouse over prevous elements, they get displayed.
Here's my html
<p-growl [(value)]="msgs"></p-growl>
<div class="center" appMcard>
<h2> Select Group (s) name(s) </h2>
<form [formGroup]="GroupRMPM_FG" class="form">
<div formArrayName="GroupId_Name" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index" >
<input type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
<button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
</button>
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length == i+1" pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn formcontainer"></button>
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length != i+1" pButton type="button" class="dummyElement" icon="fa-plus" ></button>
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length == 1" pButton type="button" class="dummyElement" icon="fa-plus" ></button>
</div>
</form>
<div>
I have created a "dummy element" so that the content is centred in the right way when I get only a "plus" icon .
Here's the CSS:
.dummyElement, .dummyElement:hover{
background-color:transparent;
border-color: transparent;
cursor:none;
color: transparent;
}
Here's what I get
Also the cursor is disappearing when I'm over the button.
In my Browser dev tool show me this :
For information I use primeNg Button.
Please use pointer-events: none; instead of cursor:none as below;
.dummyElement, .dummyElement:hover{
background-color:transparent;
border-color: transparent;
pointer-events: none;
color: transparent !important;
}
It seems like your CSS is overwritten by another CSS rule. Try to add !important to your CSS:
.dummyElement, .dummyElement:hover{
background-color:transparent;
border-color: transparent;
cursor:none;
color: transparent !important;
}