peytondodd
5/30/2019 - 2:09 PM
Flat Style Buttons
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<h1><a href="http://www.flatbuttons.com">FlatButtons.com</a></h1>
<h2>Flat Buttons (Small)</h2>
<p><a class="btn color-1" href="#">Color 1</a></p>
<a class="btn color-1" href="">Color 1</a>
<a class="btn color-2" href="">Color 2</a>
<a class="btn color-3" href="">Color 3</a>
<a class="btn color-4" href="">Color 4</a>
<a class="btn color-5" href="">Color 5</a>
<a class="btn color-6" href="">Color 6</a>
<a class="btn color-7" href="">Color 7</a>
<a class="btn color-8" href="">Color 8</a>
<a class="btn color-9" href="">Color 9</a>
<a class="btn color-10" href="">Color 10</a>
<br><br>
<h2>Flat Buttons (Medium)</h2>
<p><a class="btn md color-1" href="#">Color 1</a></p>
<a class="btn md color-1" href="">Color 1</a>
<a class="btn md color-2" href="">Color 2</a>
<a class="btn md color-3" href="">Color 3</a>
<a class="btn md color-4" href="">Color 4</a>
<a class="btn md color-5" href="">Color 5</a>
<a class="btn md color-6" href="">Color 6</a>
<a class="btn md color-7" href="">Color 7</a>
<a class="btn md color-8" href="">Color 8</a>
<a class="btn md color-9" href="">Color 9</a>
<a class="btn md color-10" href="">Color 10</a>
<br><br>
<h2>Flat Buttons (Large)</h2>
<p><a class="btn lg color-1" href="#">Color 1</a></p>
<a class="btn lg color-1" href="">Color 1</a>
<a class="btn lg color-2" href="">Color 2</a>
<a class="btn lg color-3" href="">Color 3</a>
<a class="btn lg color-4" href="">Color 4</a>
<a class="btn lg color-5" href="">Color 5</a>
<a class="btn lg color-6" href="">Color 6</a>
<a class="btn lg color-7" href="">Color 7</a>
<a class="btn lg color-8" href="">Color 8</a>
<a class="btn lg color-9" href="">Color 9</a>
<a class="btn lg color-10" href="">Color 10</a>
<br><br>
<h2>Flat Buttons (Style 1)</h2>
<p><a class="btn color-1 style-1" href="#">Color 1</a></p>
<a class="btn color-1 style-1" href="">Color 1</a>
<a class="btn color-2 style-1" href="">Color 2</a>
<a class="btn color-3 style-1" href="">Color 3</a>
<a class="btn color-4 style-1" href="">Color 4</a>
<a class="btn color-5 style-1" href="">Color 5</a>
<a class="btn color-6 style-1" href="">Color 6</a>
<a class="btn color-7 style-1" href="">Color 7</a>
<a class="btn color-8 style-1" href="">Color 8</a>
<a class="btn color-9 style-1" href="">Color 9</a>
<a class="btn color-10 style-1" href="">Color 10</a>
<br><br>
<h2>Flat Buttons (Style 2)</h2>
<p><a class="btn color-1 style-2" href="#">Color 1</a></p>
<a class="btn color-1 style-2" href="">Color 1</a>
<a class="btn color-2 style-2" href="">Color 2</a>
<a class="btn color-3 style-2" href="">Color 3</a>
<a class="btn color-4 style-2" href="">Color 4</a>
<a class="btn color-5 style-2" href="">Color 5</a>
<a class="btn color-6 style-2" href="">Color 6</a>
<a class="btn color-7 style-2" href="">Color 7</a>
<a class="btn color-8 style-2" href="">Color 8</a>
<a class="btn color-9 style-2" href="">Color 9</a>
<a class="btn color-10 style-2" href="">Color 10</a>
<br><br>
<h2>Flat Buttons (Icon)</h2>
<p><a class="btn color-1" href="#"><i class="fa fa-user"></i>Color 1</a>
</code></pre></p>
<a class="btn color-1" href=""><i class="fa fa-user"></i> Color 1</a>
<a class="btn color-2" href=""><i class="fa fa-rss"></i> Color 2</a>
<a class="btn color-3" href=""><i class="fa fa-facebook"></i> Color 3</a>
<a class="btn color-4" href=""><i class="fa fa-phone"></i> Color 4</a>
<a class="btn color-5" href=""><i class="fa fa-twitter"></i> Color 5</a>
<a class="btn color-6" href=""><i class="fa fa-dollar"></i> Color 6</a>
<a class="btn color-7" href=""><i class="fa fa-cloud"></i> Color 7</a>
<a class="btn color-8" href=""><i class="fa fa-folder"></i> Color 8</a>
<a class="btn color-9" href=""><i class="fa fa-music"></i> Color 9</a>
<a class="btn color-10" href=""><i class="fa fa-search"></i> Color 10</a>/*
Designer Anil Bilir
Email qanser@gmail.com
Version 1.0
URL www.qanser.com
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
h1,h2,h3,h4,h5,h6,p{margin-bottom: 20px;}
h1{font-size: 48px}
h1 a{color:#333;text-decoration:none}
h2{font-size: 36px;color:#3498DB;}
body{font-size: 20px;font-family: 'Open Sans Condensed', sans-serif; padding:40px}
.btn {
display: inline-block;
padding: 15px 30px;
border: 2px solid #ddd;
color: #ddd;
text-decoration: none;
margin: 0px 10px 10px 0;
transition: all .6s;
min-width: 100px;
text-align: center
}
.btn:hover {
background: #ddd;
color: #fff;
}
/* Medium Size */
.btn.md{
padding: 20px 40px
}
/* Big Size */
.btn.lg{
padding: 24px 48px;
}
/* Border Radius */
.btn.style-1{
border-radius: 10px;
}
.btn.style-2{
border-radius: 40px;
}
/* Color 1 #16A085 */
.btn.color-1 {border-color: #16A085;color: #16A085;}
.btn.color-1:hover {background: #16A085;color: #fff;}
/* Color 2 #27AE60 */
.btn.color-2 {border-color: #27AE60;color: #27AE60;}
.btn.color-2:hover {background: #27AE60;color: #fff;}
/* Color 3 #2980B9 */
.btn.color-3 {border-color: #2980B9;color: #2980B9;}
.btn.color-3:hover {background: #2980B9;color: #fff;}
/* Color 4 #8E44AD */
.btn.color-4 {border-color: #8E44AD;color: #8E44AD;}
.btn.color-4:hover {background: #8E44AD;color: #fff;}
/* Color 5 #2C3E50 */
.btn.color-5 {border-color: #2C3E50;color: #2C3E50;}
.btn.color-5:hover {background: #2C3E50;color: #fff;}
/* Color 6 #F39C12 */
.btn.color-6 {border-color: #F39C12;color: #F39C12;}
.btn.color-6:hover {background: #F39C12;color: #fff;}
/* Color 7 #D35400 */
.btn.color-7 {border-color: #D35400;color: #D35400;}
.btn.color-7:hover {background: #D35400;color: #fff;}
/* Color 8 #C0392B */
.btn.color-8 {border-color: #C0392B;color: #C0392B;}
.btn.color-8:hover {background: #C0392B;color: #fff;}
/* Color 9 #BDC3C7 */
.btn.color-9 {border-color: #BDC3C7;color: #BDC3C7;}
.btn.color-9:hover {background: #BDC3C7;color: #fff;}
/* Color 10 #7F8C8D */
.btn.color-10 {border-color: #7F8C8D;color: #7F8C8D;}
.btn.color-10:hover {background: #7F8C8D;color: #fff;}