homepage Welcome to WebmasterWorld Guest from 107.20.25.215
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
How to make text in submit form, to be bigger size?
basketmen




msg:4467788
 11:59 pm on Jun 20, 2012 (gmt 0)

This is a normal submit form
<input type="submit" value="Click here">






i want to make the text 'Click here' to bigger size, any methode is ok.
i already tried using these below, but still not the right way


bold code <b>
<input type="submit" value="<b>Click here</b>">



or big code <big>
<input type="submit" value="<big>Click here</big>">



or h1 code <h1>
<input type="submit" value="<h1>Click here</h1>">

 

phranque




msg:4467810
 12:54 am on Jun 21, 2012 (gmt 0)

try putting a class on the input element and specify your preferred style using css.

rocknbil




msg:4468020
 4:04 pm on Jun 21, 2012 (gmt 0)

You're trying to apply HTML elements in an element attribute which obviously won't work. One of the challenges in styling buttons is that by default they are inline elements, so there will be oddities when you style the size of the type inside the buttons; be sure to set the display to block (and sometimes remove the border, as below.)

The tested code below will render as a round cornered gradient submit button with mouseover effects, where you can access the button text and style it appropriately.

In exchange, please don't use "Click Here [w3.org]" :-)

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#mybutton {
display: block;
width: 6em;
height: 2em;
border: none;
padding:0;
text-align:center;
font-size: 1.5em;
line-height:1.5em;
color:#fff;
cursor:pointer;

-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;

background-image: linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);
background-image: -o-linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);
background-image: -moz-linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);
background-image: -webkit-linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);
background-image: -ms-linear-gradient(bottom, rgb(58,83,186) 12%, rgb(127,187,240) 49%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.12, rgb(58,83,186)),
color-stop(0.49, rgb(127,187,240))
);
}
#mybutton:hover {
color: #000080;
background-image: linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);
background-image: -o-linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);
background-image: -moz-linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);
background-image: -webkit-linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);
background-image: -ms-linear-gradient(bottom, rgb(120,146,250) 12%, rgb(182,244,252) 49%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.12, rgb(120,146,250)),
color-stop(0.49, rgb(182,244,252))
);
}

form { width: 6em; margin:auto; }
</style>
</head>
<body>
<form action="">
<p><input type="submit" id="mybutton" value="submit"></p>
</body>
</html>

basketmen




msg:4468161
 10:21 pm on Jun 21, 2012 (gmt 0)

geourgeous! awesome! many thanks

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved