I would like to be able to access my google form by simply pressing a button.
I have drawn a button and the hyperlink I would like to link it to is - https://docs.google.com/forms/d/e/1FAIpQLSdupUHV2uO6q69BHXvPzE1DgJu32HYQ31zPdyZ5uflmOftXRw/viewform","https://docs.google.com/forms/d/e/1FAIpQLSdupUHV2uO6q69BHXvPzE1DgJu32HYQ31zPdyZ5uflmOftXRw/viewform
Any help writing this code would be brilliant
Thank you
<form action="link-to-google-form" method="POST">
<input type="submit" value="Go" style="width:65%;height:40;" />
</form>
Change the width/height/other style options to your liking.
easily you can use (a) tag in css :
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdupUHV2uO6q69BHXvPzE1DgJu32HYQ31zPdyZ5uflmOftXRw/viewform" >
Text to show in your link
</a>
and if you want your link seems like buttons you can use this code with styles:
<a style="display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;color: #333;background-color: #fff;border-color: #ccc;" href="https://docs.google.com/forms/d/e/1FAIpQLSdupUHV2uO6q69BHXvPzE1DgJu32HYQ31zPdyZ5uflmOftXRw/viewform" >
Text to show in your link
</a>
Its better to copy <a> style content in to your css file.
If you want change color of button just change background-color and color in <a> style.
Related
I need a link on the text ”[[phone]]” Which appears the first time you press the button. The link should be ”tel:[[phone]]” to be able to click on a phone number and call it directly.
function change() {
document.getElementById("myButton1").value = "[[phone]]";
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<input onclick="change()" type="button" class="button" value="Visa nummer" id="myButton1">
You can use window.open() in your click() -function, that way you can use any element.
'_self' is so it opens the link in the same window.
window.open('tel:123456789', '_self');
Similar question: how to call a phone number through javascript without using <a> tag?
I'm trying to adjust the gap between lines in an actionButton() rendered in a Shiny App, as illustrated below and per the MWE code at the bottom. How can the line spacing be adjusted?
Only for this action button and not throughout the entire App. I am not very familiar with HTML or CSS but if I recall there is a way to apply HTML/CSS formats to either all objects in an App or only to specified objects in the App: I am interested in applying this only to specified objects.
MWE code:
library(shiny)
ui <- fluidPage(
br(),
actionButton(
"add",
HTML("Add <br/> column"),
width = '80px',
style='padding:0px; font-size:100%')
)
server <- function(input,output,session)({})
shinyApp(ui, server)
You can override the default line-height css rules from shiny.
actionButton(
"add",
HTML("Add <br/> column"),
width = '80px',
style='padding:0px; font-size:100%; line-height:1;') // notice addition of 'line-height:1;'
)
/*this is default styling aplied by shiny*/
button {
color: #333;
background-color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
border: 1px solid #ccc;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-appearance: button;
text-transform: none;
}
<button width="80px" style='padding:0px; font-size:100%; line-height:1;'>
Add <br/> column
</button>
I am trying to add a CSS button to my code, but the background colour of the button is not changing.
Here is my CSS code for the button:
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
Here is the HTML code I currently have:
<div>
Click here
</div>
The background of the button remains the standard white colour no matter what I set the background-color to. This is the current button, but I would like to change the background.
This is exactly your code. How you can see it works.
I think in your project is another CSS which overwrites your background-color.
You can use the developer tools (F12) to check which part of your CSS is responsible for the background-color.
chrome dev tools (inspecting html)
chrome dev tools (inspecting css)
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
Override other css:
.button{
background: red! important
}
Either your CSS is being overridden by another class that you haven't showed us or your browser is caching the incorrect result. If you are using Chrome:
Right click your page and click "Inspect"
In Inspector there should be a "Network" tab listed. Click it.
Inside of that tab, there should be a checkbox for "Disable Cache". Check it
Refresh your page with this option checked.
If that doesn't work then it is likely being overridden somewhere.
Yes. There's nothing wrong with the code. Maybe you shouldn't have rendered your css properly or used the same class name for lot of elements. I've also tried it with your code. It's good.
.button {
background-color: blue;
border: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
How remove this line beetween buttons? First time I have this situation. Please look at my code here:
<a href="#info-section">
<button class="cta-btn rg">WATCH</button>
</a>
<a href="#info-section">
<button class="cta-btn lf">LEARN MORE</button>
</a>
My CSS responsive for buttons:
.cta-btn{
padding: 15px;
border-radius: 30px;
width: 150px;
font-size: .8em;
color: #fff;
background-color: inherit;
border: 1px solid #fff;
margin-top: 20px;
&:hover{
cursor: pointer;
}
}
.rg {
margin-right: 10px;
}
.lf{
margin-left: 10px;
}
I think that line is the underline of the A-tags.
Try adding text-decoration: none; to your <a>. Like this:
a {
text-decoration: none;
}
It could also be possible you forgot to close an A-tag before this part of your code. So check if every <a> has an closing </a>
I assume it's to do with the way you have the <a> tags surrounding the <button> but changing it to <button class="cta-btn rg">WATCH</button> removes the underline. It's almost as if there's a space character that it's formatting.
Note, this isn't the correct way to do it, but it removes the underline.
Having problem with extra padding on a <button> element in iOS safari browser.
The markup is like this, using font-awesome icons:
<button type="submit" class="btn-class">
<i class="fa fa-plus"></i>
</button>
This is the CSS for the class in the button element:
background: #000;
width: 25px;
height: 25px;
border-radius: 100%;
border: none;
color: #fff;
font-size: 1em;
line-height: 25px;
text-align: center;
On a computer with Chrome as the browser I get this output.
But when using iPhone iOS 8.1.2 and Safari there is a strange padding to the left of the plus sign:
Any ideas on what the problem is?
EDIT
here is a fiddle on the code.
http://jsfiddle.net/qpvat7xv/
Simply add padding: 0 to your <button> style:
button {
-webkit-appearance: button;
cursor: pointer;
font: inherit;
overflow: visible;
text-transform: none;
padding:0;
}
This will solve the bug with Button tag which creates the padding in iOS.