CodePen

HTML

            
              <div class="button-examples">
<div class="button-1"><a href="#">Button #1</a></div>
<div class="button-2"><a href="#">Button #2</a></div>
</div>
            
          
!

CSS

            
              body{
	font-size: 100%;
	background-color: #f6f2eb;
	color: #524d46;
  text-align: center;
  margin:3em;
}

.button-examples a{
	text-align: center;
	display: inline-block;
	color: #f6f2eb;
	background-color: #fc6651;
	margin-bottom: 2em;
  text-decoration:none;
  min-width: 10em
}

.button-examples a:hover{
	color: #f6f2eb;
	background-color: #e1513a;
}

/*A quick example of the benefits of a flexible foundation for proportional scaling*/

.button-1 a{
	padding: 8px 0;
}

.button-2 a{
	padding: 0.5em 0;
}

@media screen and (min-width: 37.500em) { /*600px*/
  body {font-size: 112.5%;}
  /*Extra code below*/
	.button-1 a{padding: 9px 0;}
}

@media screen and (min-width: 50.000em) { /*800px*/
  body {font-size: 125%;}
  /*Extra code below*/
	.button-1 a{ padding: 10px 0;}
}

@media screen and (min-width: 64.375em){ /*1030px*/
  body {font-size: 137.5%;}
  /*Extra code below*/
	.button-1 a{padding: 11px 0;}
}

@media screen and (min-width: 75.000em) and (min-height:31.250em) { /*1200px X 500px*/
  body {font-size: 150%;}
  /*Extra code below*/
	.button-1 a{padding: 12px 0;}
}

@media screen and (min-width: 103.125em) and (min-height:50.000em)  { /*1650px X 800px*/
  body {font-size: 162.5%;}
  /*Extra code below*/
	.button-1 a{padding: 13px 0;}
}





            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................