Form in tooltip with text linked send button
Form in tooltip with text linked send button - hello guys Best Web Hosting And Website Builder, On sharing web hosting this time titled Form in tooltip with text linked send button, I have been providing the Best Web Hosting And complete Website Builder. Hopefully the contents of posts Best Web Hosting And Website Builder that I write this you can understand. This, he'll Best Web Hosting And Website Builder.
Title : Form in tooltip with text linked send button
other title : Form in tooltip with text linked send button
Another thing i needed in the same form, to keep that simple and minimalist design I talked about, was to transform the send button into a simple text link. Well, nothing is easier than that: you just have to set the input tag's border to 0 and set its background color to match the page's (you may set a style class instead in the head section of your page and add the class to the input tag, just like you do it with your divs). Additionally, to make sure your users know that it's a link, you'll have to turn your cursor into a pointer. Guess what, there's a css attribute for that too! I remember how amazed I was when I first realized that actually everything in the input tag can be edited just the same way as any tag that allows using styles. :)
Let me put an example css code here for you:
(click in the box to highlight the code for copy)
You'll find a more detailed article only talking about how to make a submit button work like a link here.
The end restult, once again, can be found on Gergo Matis's website in the bottom left hand corner by hovering over the 'contact' link. Neat, ain't it?
Title : Form in tooltip with text linked send button
other title : Form in tooltip with text linked send button
Form in tooltip with text linked send button
While continuing to work on gergomatis.com I needed to find a simple contact form, something that fits the minimalist design of the site. I was spending a very long time with searching and I thought this was only possible with JavaScript [one of the simplest examples: Help Writing An Html Code (onclick Open Something)], but then I found exactly what I needed. No JavaScript, no complicated coding, a simple CSS rule is enough: The thread a Form in Tooltip - is it possible? suggests another link, CSS Bubble Tooltips that is using the a:hover attribute to display tooltips that on the other hand can be filled in with any html code such as an e-mail form for example - really just what I was looking for!Another thing i needed in the same form, to keep that simple and minimalist design I talked about, was to transform the send button into a simple text link. Well, nothing is easier than that: you just have to set the input tag's border to 0 and set its background color to match the page's (you may set a style class instead in the head section of your page and add the class to the input tag, just like you do it with your divs). Additionally, to make sure your users know that it's a link, you'll have to turn your cursor into a pointer. Guess what, there's a css attribute for that too! I remember how amazed I was when I first realized that actually everything in the input tag can be edited just the same way as any tag that allows using styles. :)
Let me put an example css code here for you:
(click in the box to highlight the code for copy)
You'll find a more detailed article only talking about how to make a submit button work like a link here.
The end restult, once again, can be found on Gergo Matis's website in the bottom left hand corner by hovering over the 'contact' link. Neat, ain't it?
Thus article Form in tooltip with text linked send button
Best Web Hosting And Website Builder Form in tooltip with text linked send button, Hopefully can give benefits to all of you. well, the Best Web Hosting And Website Builder posts this time.
No comments: