2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 11 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 ??

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 56 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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{

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 7 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

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;}