Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Liveweave </title> <!-- Place cursor after this and select a JavaScript library from the menu above --> <!-- Supports context-sensitive CSS3 auto-completion --> <!-- Style starts here. Try adding new CSS tags. --> <style type="text/css"> .cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } /* Form wrapper styling */ .form-wrapper { width: 222px; padding: 5px; margin: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); } /* Form text input */ .form-wrapper input { width: 150px; height: 0px; padding: 10px 5px; float: left; font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 0; background: #eee; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; } /* Form submit button */ .form-wrapper button { overflow: visible; position: relative; float: left; border: 0; padding: 0; cursor: pointer; height: 20px; width: 62px; font: bold 12px/20px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; text-transform: uppercase; background: #1854C4; /* 1854C4 = Normal Theme Blue Color */ border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } .form-wrapper button:hover{ background: #3875E7; /*3875E7 = Hover color*/ } .form-wrapper button:active, .form-wrapper button:focus{ background: #13439B; outline: 0; } .form-wrapper button:before { /* left arrow */ content: ''; position: absolute; border-width: 4px 4px 4px 0; border-style: solid solid solid none; border-color: transparent #1854C4 transparent; /* 1854C4 = Normal Theme Blue Color */ top: 6px; left: -4px; } .form-wrapper button:hover:before{ border-right-color: #3875E7; /*3875E7 = Hover color*/ } .form-wrapper button:focus:before, .form-wrapper button:active:before{ border-right-color: #13439B; } .form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */ border: 0; padding: 0; } </style> <!-- Style ends here --> </head> <body> <form class="form-wrapper cf"> <input type="text" placeholder="Enter your email here..." required> <button type="submit"> Submit </button> </form> </body> </html>