Adding image to input type submit


Adding image to input type submit



I have a button with an SVG image. I have successfully added the image for div's, but unsure on how to apply it to input tags.


div



For example:




.formLink {
text-align: center;
display: inline-block;
margin: 0 0 88px;
transition: all .25s ease;
max-width: 100%;
box-sizing: border-box;
background: linear-gradient(to right, #e82171, #ef3e36);
padding: 24px 40px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
font-size: 18px;
color: #fff;
text-decoration: none;
font-family: 'GeomanistRegular', sans-serif;
cursor: pointer;
font-weight: 900;
line-height: 1em;
margin-right: 0;
margin-left: 0;
transition: all .6s;
}

i.arrow {
background: no-repeat;
background-image: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/Arrow.svg);
padding: 7px;
margin: 4px 0 4px 10px;
float: right;
transition: all 0.2s;
}


/***********/

input {
text-align: center;
display: inline-block;
margin: 28px 0 1em;
transition: all .25s ease;
max-width: 100%;
box-sizing: border-box;
padding: 24px 1.2em;
width: 220px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
font-size: 18px;
color: #fff;
text-decoration: none;
font-family: 'GeomanistRegular', sans-serif;
cursor: pointer;
font-weight: 900;
line-height: 1em;
background: linear-gradient(to right, #e82171, #ef3e36);
border: 0;
transition: all .6s;
/*background: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/Arrow.svg) no-repeat scroll 14px 7px;
background-size: 20px;*/
}


Download now
<br>
<input type="submit" value="Send Message" class="hs-button primary large" data-reactid=".hbspt-forms-0.4.1.0">



As you can see, I've tried to add background:url to the input, but it hide's my whole button?


background:url



I essentially want the send message button to look like the download now button.



Ideas? I cannot change the input HTML. Need to do this through CSS





Are you looking for input type image? developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image
– rypskar
Jun 29 at 8:59





make it as a button with an action triggered on click? OR wrap in <a> tags
– ThisGuyHasTwoThumbs
Jun 29 at 8:59



<a>





Sorry guys, forgot the clarify, I cannot change the input HTML. Need to do this through CSS.
– Freddy
Jun 29 at 9:03





I opened the image and saw it(cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/…). Its nothing other than plain white background. If you really have some image with picture, you can give background-size: 100%
– Akash Pinnaka
Jun 29 at 9:04



background-size: 100%




2 Answers
2



Here is a Working Example http://jsfiddle.net/xpvt214o/328055/


Download now
<br>
<button type="submit" value="Send Message" class="hs-button primary large formLink" data-reactid=".hbspt-forms-0.4.1.0"> Send Message<i class="arrow"></i></button>





test it and up vote please
– Joseph Stalin
Jun 29 at 9:16





This works, but please also add a little detail about why in OP's original HTML code it didn't work.
– Deepak Kamat
Jun 29 at 9:18





we can't put images over input button directly, we have to use either with a <button> || anchor <a> tag || <span> tag with some CSS
– Joseph Stalin
Jun 29 at 9:23





Hi Joseph, I can see it works, but unfortunately I cannot alter the HTML markup. Therefore I cannot change input into a button. Any way to do this via CSS for input?
– Freddy
Jun 29 at 9:58




.formLink {
text-align: center;
display: inline-block;
margin: 0 0 88px;
transition: all .25s ease;
max-width: 100%;
box-sizing: border-box;
background: linear-gradient(to right, #e82171, #ef3e36);
padding: 24px 40px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
font-size: 18px;
color: #fff;
text-decoration: none;
font-family: 'GeomanistRegular', sans-serif;
cursor: pointer;
font-weight: 900;
line-height: 1em;
margin-right: 0;
margin-left: 0;
transition: all .6s;
}

i.arrow {
background: no-repeat;
background-image: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/Arrow.svg);
padding: 7px;
margin: 4px 0 4px 10px;
float: right;
transition: all 0.2s;
}


/***********/
i.new {
float: left;
position: relative;
background: no-repeat;
background-image: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/Arrow.svg);
padding: 7px;
margin: 53px 15px 19px 179px;
transition: all 0.2s;

}

input.hs-button.primary.large.formLink {
position: absolute;
text-align: center;
display: inline-block;
margin: 25px 0 1em;
transition: all .25s ease;
max-width: 100%;
box-sizing: border-box;
padding: 24px 40px;
width: 220px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
font-size: 18px;
color: #fff;
text-decoration: none;
font-family: 'GeomanistRegular', sans-serif;
cursor: pointer;
font-weight: 900;
line-height: 1em;
background: linear-gradient(to right, #e82171, #ef3e36);
border: 0;
transition: all .6s;
}


Download now
<br>
<input type="submit" value="Send Message" class="hs-button primary large formLink" data-reactid=".hbspt-forms-0.4.1.0"><i class="new"></i></input>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more