i recieved the following code for a button that i wanted to add on my Website. When i click on it it forwards me to the Website on the same Page but i want it to open a new tab with the Website
(add "<" at start to try the code)+
<a
class="button"
style="
background-color: #24baef;
color: #1c212e;
font-size: 14px;
font-weight: 600;
padding: 3.5px 17.5px;
border-radius: 5px;
"
href="https://www.youtube.com/"
>
Button
</a>
Best Regards,
Danowick
Use target attribute "_blank" inside of your anchor tag.
<a class="button" style=
"background-color: #24baef;
color: #1c212e;
font-size: 14px;
font-weight: 600;
padding: 3.5px 17.5px;
border-radius: 5px;"
href="https://youtube.com/" target="_blank">
For more reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
https://www.w3schools.com/tags/att_a_target.asp
Related
Hey i want to put this into href link in this button how to input that
\"/led=ON\"\"
This is button code with animation
<button type="button" class="btn btn-primary btn-cons btn-animated from-top fa fa-arrow-up"><span>Open</span></button>
To give you a very bare-bones example of my comment above (formatting a link as a button), here is a decent place to start. Feel free to format it however you want of course.
HTML Hyperlink:
Example
CSS Class:
.linkLikeButton {
display: inline-block;
border: 2px solid black;
padding: 10px;
background-color: steelblue;
color: white;
text-decoration: none;
}
.linkLikeButton:hover {
background-color: lightblue;
}
I have a problem with buttons when my site switch on mobile version
Html is:
<p style="text-align: right;">
<a class="button btn-primary" href="index.php/reprogrammation/193-bmw"> Retour "Choix de la marque" </a>
</p>
<p style="text-align: center;">
<a class="button btn-primary" href="#">2005 - E8x</a>
<a class="button btn-primary" href="#">2007 - E8x</a>
<a class="button btn-primary" href="#">2011 - F2x</a>
</p>
<p><img style="float: right;" src="images/marques/bmw/serie1.png" alt="" width="400" height="150" /></p>
CSS is:
.btn-primary {
background: transparent none repeat scroll 0% 0%;
border: 2px solid #C01C32;
border-radius: 20px;
font-family: "Montserrat",sans-serif;
font-size: 13px;
text-transform: uppercase;
padding: 8px 24px;
Here are two screenshots:
PC Version
Mobile version
Can anyone please tell me how to put a space between this buttons
.btn-primary {
background: transparent none repeat scroll 0% 0%;
border: 2px solid #C01C32;
border-radius: 20px;
font-family: "Montserrat",sans-serif;
font-size: 13px;
text-transform: uppercase;
display: inline-block;
margin:10px;
padding: 8px 24px;
}
I suggest using the display inline-block to achieve the desired affect, adjust to preference.
Thanks with inline-block and margin:5px
I am developing a Web app with Laravel and using Facebook's PHP SDK. I want to have Facebook's "Login" button appear on my homepage, but that apparently only comes with the JavaScript SDK. How do I get Facebook's "Login" button when I'm using Facebook's PHP SDK to log users in?
Add these three css files in your Web app.
http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
bootstrap.min.css
https://raw.github.com/noizwaves/bootstrap-social-buttons/v1.0.0/social-buttons.css
And then write this in your view.
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
These buttons don't come just like that. In JS you must have use facebook-login-button that's the reason its coming there. The same button can not be used while using the PHP SDK.
In PHP you can create them yourself. Try this-
$user = $facebook->getUser();
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl();
}
<?php if ($user): ?>
Logout <!-- design these buttons -->
<?php else: ?>
Login with Facebook
<?php endif ?>
The code is self-explanatory I guess :)
I just tested the answer from Abdussami Tayyab and works fine
I got the latest from http://fontawesome.io/ (4.2.2) then created a /fonts and /css in top folder of website.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<?php include 'css/font-awesome.css'; ?>
<?php include 'css/font-awesome.min.css'; ?>
<?php include 'css/social-buttons.css'; ?>
</style>
</head>
<body>
<?php
print "Hello world!";
?>
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
</body>
</html>
I went ahead and implemented the Javascript login and then used Firebug to get the styles and URLs to images. I didn't bother to clean up the CSS so there is likely things that don't need to be here, feel free to clean it up some and re-post. My sizing matches the 'like' and 'post' button's, not the original log-in button.
Two things not covered here: The button doesn't do anything. Make it a link or use Javascript. I included the link to the 'progress' graphic but didn't implement it either.
Link to facebook images (image names changed later):
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/t4ZSL-NWK2R.png
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yE/r/49Rx-CGUu94.gif
CSS:
.facebook_button{
background: linear-gradient(#4c69ba,#3b55a0) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #4c69ba;
border-radius: 2px;
color: #ff;
font-family: "Helvetica neue";
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
display: inline-block;
vertical-align: top;
/*now inherited*/
border-collapse:collapse;
border-spacing: 0;
color: #fff;
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
padding: none;
};
.facebook_button:hover{
background: linear-gradient(#5b7bd5, #4864b1) repeat scroll 0 0 rgba(0,0,0,0);
border-color: #5874c3 #4961a8 #3b5998;
box-shadow: 0 1px 0 #607fd6 inset;
cursor: pointer;
}
.facebook_login{
border: 0 none;
border-collapse: collapse;
border-spacing: 0;
color: #fff;
text-align: left;
font-size: 11px;
font-family: "Helvetica neue";
text-shadow: 0 -1px 0 #354c8c;
cursor:pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
}
.outer{
padding-bottom: 0;
padding-top: 0;
padding-right: 0;
font-family: "helvetica neue", helvetica,arial,"lucida grande",sans-serif;
text-align:left;
font-size:11px;
/*now inherited*/
border-collapse:collapse;
border-spacing:0;
color: #fff;
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
}
.middle{
border: medium none;
display: inline-block;
font-family: "helvetica neue",helvetica,arial,"lucida grande",sans-serif;
text-align:left;
font-size: 11px;
/*inherited*/
}
.inner{
font-size: 11px;
line-height: 14px;
padding: 2px 6px;
font-weight: bold;
border: medium none;
display: inline-block;
white-space: nowrap;
-moz-text-size-adjust: none;
direction: ltr;
}
The HTML:
<div class="facebook_button">
<table class="facebook_login">
<tbody>
<tr>
<td class="outer">
<span class="middle">
<span class="inner">
<img src="library/img/facebook.png" style="width:16px;height:16px;">
</span>
</span>
</td>
<td class="outer">
<span class="middle">
<span class="inner">
Log In
</span>
</span>
</td>
</tr>
</tbody>
</table>
I'm using this tutorial on nettuts to build a contact form. Their contact form works fine on a mac that's running on 10.6.8 but doesn't work on a mac running on 10.8.4? I'm assuming it might be something to do with version of PHP but I'm not sure how to fix their code to make it paly nice can anyone help? I have also tried it on my websites server but no joy there either.
thanks,
Instead of php, you can use a button with a mailto: tag
.button {
background-color: #ffa200;
border: none;
color: white;
padding: 15px 410px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover
{
background-color:#ff2f00;
}
a.a
{
text-decoration: none;
}
h3.k
{
color: white;
font-weight: bold;
}
<center>
<button class="button">
<a class="a" href="mailto: name#example.com"><h3 class="k">SEND US A MESSAGE</h3></a>
</button>
</center>
This tag opens the Mail app and already shows who it is to
I don't even know if I'm doing this correctly, but I thought I'd ask to get a better opinion. Basically what I've done is this: created an information/navigation bar that expands depending on tab clicked by the user. What I'm trying to add is the functionality to expand a certain tab and be forwarded to it (like what this link would do: <a href="#contactus">) based on a link earlier on the same page. I can't seem to do it. The tab that should be opened is contained within a <ul><li> list and is hidden. I'll include the code:
<div id="tab1">
<ul class="tablinks">
<li><span>Check-Out</span></li>
<li><a onClick="show('tab2')">Payment</a></li>
</ul>
<table>
<tr>
<td><img alt=Check-Out src="http://link.com/images/checkouticon.gif" width=48px height=45></td>
<td>
<p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
</td>
</tr>
</table>
<div class="tabbase"></div>
</div>
<!-- tab 2 -->
<div id="tab2">
<ul class="tablinks">
<li><a onClick="show('tab1')">Check-Out</a></li>
<li><span>Payment</span></li>
</ul>
<table>
<tr>
<td vAlign=top align=left><img alt=Check-Out src="http://link.com/images/paypalicon.gif" width=48px height=45></td>
<td>
<p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
</td>
</tr>
</table>
<div class="tabbase"></div>
</div>
This is the CSS that affects it:
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 { font-family: trebuchet ms, Helvetica, sans-serif; height:550px;}
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
width: 750px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 11px;
}
#tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
display: none;
}
ul.tablinks {
width: 600px;
margin: 20px 0px 0px 0px;
padding: 0px;
list-style: none;
height: 23px;
display: block;
cursor: pointer;
border-bottom: 0px solid #fff;
}
ul.tablinks li {
display: inline;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}
ul.tablinks li a, ul.tablinks li a:visited {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
font-weight: normal;
font-size: 11px;
background: url(http://link.com/images/tabout3.gif);
color: #ffffff;
}
ul.tablinks li span {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration:underline;
font-weight: normal;
font-size: 11px;
}
ul.tablinks li a:hover,
ul.tablinks li a.hover {
background: url(http://link.com/images/tabover.gif);
color: #000;
}
ul.tablinks li a:active{
text-decoration:underline;
}
div.tabbase {
display: block;
height: 3px;
line-height: 8px;
font-size: 0px;
}
div.tabbase {
background: url(http://link.com/images/boxbase3.gif);
}
And last but not least this is the code that is within a .php external file that affects the hidden aspect of the tabs:
function show(id)
{
checkseo()
if (err == "1"){return;}
hide()
if(ie5 || ns6){
//document.getElementById(id).style.display = "inline";
document.getElementById(id).style.display = "block";
}
}
function hide(){
if(ie5 || ns6){
document.getElementById('tab1').style.display = "none";
document.getElementById('tab2').style.display = "none";
document.getElementById('tab3').style.display = "none";
document.getElementById('tab4').style.display = "none";
document.getElementById('tab5').style.display = "none";
document.getElementById('tab6').style.display = "none";
document.getElementById('tab7').style.display = "none";
}
}
So the idea is to be able to insert a link earlier in the document to open the "Payment" tab. I tried something like this: Payment Information and changed the tags for the list to: <li><span name="payments">Payments</span></li>. This didn't work unless I had already clicked on the "Payments" tab and opened it and then clicked on the link. Then my screen would scroll down and focus on that area. Is there a way to have the screen scroll down and view the <span> without having to 'open' it first?
Thanks for all your help in advance. And I should note, that while I do have some ability with HTML, Javascript, and PHP, I'm still learning and don't know all of the best ways of doing things.
The best (and easiest) way to code this is to use a JS framework like jQuery. It'll help tremendously in normalizing the browser differences.
But if that's not an option, let's try to fix the existing code. Payment Information will jump to an element with the id="payments", not name. Once you fix that, add an onClick="show('tab2')" to that <a>.
In the show function, what is the point of this code if(ie5 || ns6)? This is basically saying, if it's IE5 or Netscape6, then show the element (assuming the variable ie5 and ns6 are set properly somewhere of course). Try removing this, I don't think you need it.