cinque8 Posted August 4, 2017 Share Posted August 4, 2017 Hello, <input type="submit" value="Subscribe" /> I was wondering if anyone could tell me how I could enhance my submit button by: 1. Doubling the size 2.Rounding the corners 3. Placing a silver border around the button 4. Changing the background color to red 5. Changing the text color to white. I use the PageBreeze HTML editor, Any help will be greatly appreciated! Thank you Quote Link to comment https://forums.phpfreaks.com/topic/304509-enhancing-my-submit-button/ Share on other sites More sharing options...
Jacques1 Posted August 4, 2017 Share Posted August 4, 2017 Learn CSS. 1 Quote Link to comment https://forums.phpfreaks.com/topic/304509-enhancing-my-submit-button/#findComment-1549288 Share on other sites More sharing options...
Gandalf64 Posted August 24, 2017 Share Posted August 24, 2017 A good way to practice HTML/CSS and Javascript is using jsfiddle -> https://jsfiddle.net/Strider64/o0tqd538/12/ A great way to test out small designs and javascript code. Quote Link to comment https://forums.phpfreaks.com/topic/304509-enhancing-my-submit-button/#findComment-1550145 Share on other sites More sharing options...
Sepodati Posted August 24, 2017 Share Posted August 24, 2017 JSFiddle site is very useful, but Firefox and Chrome (and probably the others) allow you to right-click on an HTML page element and click "inspect" or "inspect element". From there, you can "fiddle" with the CSS in the styles tab or area. Changes are real time, so you can adjust or add values there until you see what you want. I'm in this area a lot to view ajax responses and replay requests for error checking. As I'm just getting back into all of this, the capabilities here are pretty amazing. Quote Link to comment https://forums.phpfreaks.com/topic/304509-enhancing-my-submit-button/#findComment-1550148 Share on other sites More sharing options...
Psycho Posted August 24, 2017 Share Posted August 24, 2017 (edited) First off, is there a specific reason you are using an INPUT button for your submit as opposed to a simple 'button' element? I typically see inputs used when there is really no need for it. Do you want the style to only apply to one button or to all buttons? If you want it to apply to all buttons, then define the properties for 'button' in your css style properties. <head> <style> button { ## properties go here ## } </style> If you want the style to apply to just one (or some buttons), create the button with a class name <input type="submit" value="Subscribe" class="specialButton" /> Then in your style properties set properties for that class name <head> <style> .class_name_of_button { padding: 14px 30px; margin: 4px 2px; font-size: 16px; border: 2px solid #C0C0C0; border-radius: 25px; background-color: #ff0000; color: white; display: inline-block; cursor: pointer; } </style> Notes: 1) Style properties are one thing that do not have complete comparability between browsers. So, be sure to check the display in the different browsers you intend to support. 2) Be sure to change the padding/margin of the button to increase the size instead of hard coding a specific size (via height & width). Otherwise you could end up cutting off text. Even if you hard code it and ensure it looks right on your monitor does not mean it would look right for someone else. Edited August 24, 2017 by Psycho Quote Link to comment https://forums.phpfreaks.com/topic/304509-enhancing-my-submit-button/#findComment-1550149 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.