Tue, 2015-04-21 20:06
hey guys , check out the following HTML , its for demo purpose :
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Untitled</title> <link rel="stylesheet" href="css/style.css"> <link rel="author" href="humans.txt"> <style> body { padding: 0; margin: 0; font-family: verdana; font-size: 2em; color: #444; } .primary-btn { color: #eee; outline:none; border:none; padding:10px 20px; text-transform: uppercase; cursor: pointer; text-shadow: 1px 1px 1px rgba(0,0,0,.3); display: block; background: tomato; margin: 0 auto; font-weight: bold; } .modal { height: 200px; max-width: 400px; border-radius: 5px; line-height: 200px; text-align: center; margin: 30px auto; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.1); box-shadow: 1px 1px 4px rgba(0,0,0,.1); -webkit-transition: .5s; -o-transition: .5s; transition: .5s; position: relative; border: 1px solid rgba(0,0,0,.2); text-transform: uppercase; } .fade { transform: translate(0 , -50px); opacity: 0; } .in { transform: translate(0 , 0px); opacity: 1; } </style> </head> <body> <div class="modal fade" id="modal"> Hey i am a modal </div> <button data-toggle="#modal" class="primary-btn">Show Modal</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/smallest-modal.js"></script> </body> </html>
the following styles from the tag were not cascading to the button element , so i had to apply them explicitly to :
font-family: verdana; font-size: 2em; color: #444;
whats the problem ??
Fri, 2015-04-24 00:34
#1
Buttons and form elements in
Buttons and form elements in general have browser/OS styles which are more specific then the body selector.
Try:
body, button{
Wed, 2015-05-06 14:17
#2
cascading to button
hi,the button only show class name are missing check it out to separate class name and mentioned width,
1.remove .fade {opacity;}