Double Buttons
Creating a simple yet elegant split double buttons using CSS.
Creating a simple yet elegant split double buttons using CSS.
<div class="double-buttons">
<div class="double-buttons">
<a href="#">Preview</a><!--
--><a href="#">Download</a>
<span class="or">or</span>
</div><!-- IGNORE --><div class="copyright">
By <a href="http://fwpolice.com">the Fireworks Police</a>.
</div>body{
body{text-align:center;
padding:100px 0;
background:#f5f5f5;
}
.double-buttons{display:inline-block;
background-color: #fff;
border:1px solid #ddd;
position:relative;
border-radius: 20px;
height: 40px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
overflow: hidden;
}
.double-buttons a{
display: inline-block;
padding: 0 30px;
line-height: 40px;
color: #444;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
.double-buttons a:first-child{
border-right: 1px solid #ddd;
}
.double-buttons a:hover{
background-color: #EE4E44;
color: #fff;
}
.double-buttons a:active{
background-color: #444;
color: #fff;
}
.double-buttons .or{
position: absolute;
display: block;
width: 26px;
height: 26px;
line-height: 26px;
background-color: #fff;
border-radius:100%;
border: 1px solid #ddd;
font-style: italic;
color: #666;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
cursor: default;
}
/****** IGNORE ******/.copyright {display:block;
margin-top: 100px;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.copyright a{
text-decoration: none;
color: #EE4E44;
}