I am trying to create a button in an HTML email that goes to a link in a href tag. I have practically no understanding of html code to be honest. This is what I'm trying:
<p>
<input style="width: 200px; padding: 15px; box-shadow: 6px 6px 5px;
font-weight: MEDIUM; background: #3ebfac; color: #000000;
cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9;
font-size: 110%;" onclick="window.location= a href=[SURVEYURL]"
type="submit" value="START NOW" />
</p>
The link doesn't seem to work...
Please let me know if you can help?
Thanks.
Alex.
You will never get JavaScript to run in an email for obvious security reasons.
Also no need to use a submit button which will attempt to submit a non-existing form.
This will work better - the anchor is allowed in emails
<p>
<a href="[SURVEYURL]" style="text-decoration:none;
width: 200px; padding: 15px; box-shadow: 6px 6px 5px;
font-weight: MEDIUM; background: #3ebfac; color: #000000;
cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9;
font-size: 110%;">START NOW</a>
</p>
Related
That's my first try:
.pricingTable-firstTable_table__getstart {
color: white;
background-color: #71ce73;
margin-top: 30px;
border-radius: 5px;
cursor: pointer;
padding: 15px;
box-shadow: 0px 3px 0px 0px #66ac64;
letter-spacing: 0.07em;
transition: all 0.4s ease;
}
<div class="pricingTable-firstTable_table__getstart" href="https://website.com">JOIN</div>
It doesn't click, and doesn't change anything, I appreciate the help
The usual way to achieve this is wrapping your div inside an a tag:
<a href="https://website.com">
<div class="pricingTable-firstTable_table__getstart">JOIN</div>
</a>
You could also solve this (less elegantly imo) using an onclick event in JavaScript:
<div class="pricingTable-firstTable_table__getstart" onclick="window.location.href='https://website.com';">JOIN</div>
If you want an anchor link to look like a button. Style it something like this:
Css
.link-button {
padding: 5px 10px 5px 10px;
border: 1px solid blue;
background-color: lightblue;
}
.link-button:hover {
background-color: blue;
cursor: pointer;
}
And the markup
<a class="link-button">Anchor as button</a>
But I prefer to use buttons for operations, and show navigation as anchors. Because people recognize them for that.
I created a submit button and anchor link with same class name, with same style. But the result is different. My anchor link is bigger than my submit button. Like this
Here's the snippet
.btn {
display: inline-block;
background: red;
margin:10px;
padding: 13px 30px;
border:none;
border-radius: 4px !important;
box-shadow: 0 4px 0 0 blue;
color: #fff;
font-size: 18px;
text-transform: uppercase;
}
<input type="submit" value="Login" class="btn">
Login
How to make it have same size? without set the height to exactly px or set the line height of the element. Thanks in advance
on the jsfiddle or sippet have same style, but when I create and run on local browser it's say different thing
Setting a line-height in the .btn class makes them equally tall.
.btn {
line-height: 1em;
display: inline-block;
background: red;
margin:10px;
padding: 13px 30px;
border:none;
border-radius: 4px !important;
box-shadow: 0 4px 0 0 blue;
color: #fff;
font-size: 18px;
text-transform: uppercase;
}
<input type="submit" value="Login" class="btn">
Login
I have the following simple HTML - https://jsfiddle.net/mark69_fnd/6g0L0jwc/
<body style="background-color: white; font: normal 14px Verdana">
Hello
<p></p>
<a style="
font: bold 11px;
text-decoration: none;
background-color: blue;
padding: 10px;
color: white;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;"
href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
<p></p>
Good bye
</body>
Now I am trying to see how it is rendered when emailed using the service at https://putsmail.com.
In gmail:
In Outlook:
Is it possible to change the HTML code in a way that Outlook displays the button with padding, like Gmail does?
Unfortunately, I cannot use images, but everything else is fine.
EDIT 1
LGSon's answer
<body style="background-color: white; font: normal 14px Verdana">
Hello <br>
<div style="display: inline-block;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;">
<a style="display: inline-block;
font: bold 11px;
background-color: blue;
border: 10px solid blue;
text-decoration: none;
color: white;"
href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
</div>
<br> Good bye
</body>
generates the following result in Outlook:
Which is pretty close to what I need, but the white bar stretching along the page is in the way.
Will this work?
<body style="background-color: white; font: normal 14px Verdana">
Hello <br>
<a style="display: inline-block;
font: bold 11px;
background-color: blue;
border: 20px solid blue;
text-decoration: none;
color: white;"
href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
<br> Good bye
</body>
I'd think this would be easy, so I am sure I am missing something simple.
I have a button I am trying to style on my website.
Here is the css used to style it.
button.popmake-contact-us {
display: inline-block;
height: 50px;
line-height: 50px;
padding-right: 30px;
padding-left: 30px;
position: relative;
font-family: 'Special Elite', 'Inconsolata', 'Droid Sans', serif!important;
font-size: 20px;
background-color: rgb(247, 210, 104);
color: rgb(255,255,255);
text-decoration: none;
text-transform: uppercase;
border-color: #EDE5B1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
zoom: 1;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: -2px -2px 0px rgba(95, 91, 77, 0.13);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);}
.contact_popup_button {position: fixed;bottom: 0px;right: 0px;z-index: 9999;}
And this is the HTML for the button.
<footer>
<!--copyright info-->
<p class="footer-copyright">© Copyright 2015 | Sporting Life Bar . All Rights Reserved. </p>
<!--Form Submission Button-->
<div class="contact_popup_button" style="cursor: pointer;"><button class="popmake-contact-us" style="cursor: pointer;">Contact Us</button></div>
I can practice styling it within Chromes Inspeciton tools, but once I add it to the style.css file in the child theme..it goes back to the default style. I can't figure out WHY it is doing this!
The website in question I've got live on the staging site if you want to take a look at that. http://staging.sportinglifebar.com/
The button is kept at the very bottom right of the website. Praying someone can help point me in the correct direction!
If it is helpful, I am using the wordpress plugin "Popup Maker" to style the form and create to pop up. You have to define a class for the button to activate the popup.
You have a mistake in your selector
.popmake-contact-us input[type="button"] {
font-family: helvetica;
color: #666666;
font-size: 12px;
border:3px solid;
border-color: #000;
}
will look an input with type= button with a parent class of popmake-contact-us
So what you want is a button with a class
button.popmake-contact-us{ ..style..}
I'm working on styling my website forms and found a tutorial that seems to work up to a point... The tutorial includes code to have hover hints, and this code is causing things to get ugly. Instead of the fields all lining up under one another they seem to be attempting to position themselves one right after another and wrapping all the way down the window.
Here is the code element for the feature in question followed by the CSS...
HTML
<form id="defaultform" class="rounded" name="form2" method="post" action="<?php echo $editFormAction; ?>">
<h3>Contact Form</h3>
<div class="field">
<label for="hostess_fname">First Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_fname" />
<p class="hint">Enter your name.</p>
</div>
<div class="field">
<label for="email">Last Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_lname" />
<p class="hint">Enter your email.</p>
</div>
<input type="submit" value="Lookup Hostess" />
<input type="hidden" name="Lookup" value="form2" />
CSS
#defaultform {
width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 120px;
line-height: 25px;
font-size: 15px;
}
#defaultform.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #797979;
}
.hint{
display: none;
}
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
I just updated the code with more of the HTML from a shorter form that I was trying with the same CSS. I also added some more of the CSS code. I'm getting the same behavior. I'm still confused on selectors and how those are defined and stuff.
I see what you're doing now that you've added your code. It's a pretty simple fix, but hard to catch:
CSS
.field{
clear:both;
}
Here's the jsFiddle