Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <form id = "submit" method="get" action="">
- <input type="submit" name="action" value="Download" id="dlbutton"/>
- </form>
- #dlbutton{
- background:#223445;
- color:#FFFFFF ;
- border: 1px solid #223445;
- border-radius: 18px
- -moz-border-radius: 5px
- display:inline-block;
- width: 20em;
- height: 5em;
- -webkit-font-smoothing: antialiased;
- }
- <p><button class="clickable" id="clickable">Click me</button></p>
- border-radius: 18px
- -moz-border-radius: 5px
- border-radius: 18px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- // FIRST STYLE THE BUTTON
- input#bigbutton {
- width:500px;
- background: #3e9cbf; // the colour of the button
- padding: 8px 14px 10px; // apply some padding inside the button
- border:1px solid #3e9cbf; // required or the default border for the browser will appear
- cursor:pointer; // forces the cursor to change to a hand when the button is hovered
- // Style the text
- font-size:1.5em;
- font-family:Oswald, sans-serif;
- letter-spacing:.1em;
- text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); // give the text a shadow
- color: #fff;
- /*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
- -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
- -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
- box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
- /*give the corners a small curve*/
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- }
- // SET THE BUTTON'S HOVER AND FOCUS STATES
- input#bigbutton:hover, input#bigbutton:focus {
- color:#dfe7ea;
- /*reduce the size of the shadow to give a pushed effect*/
- -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
- -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
- box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
- }
- <input id="bigbutton" type="submit" value="Big Button That Needs Clicking" />
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement