|
<!--- A pattern for a custom button in CSS3, based loosely on |
|
something I saw online a year ago (forgot where). The button |
|
has a colored bar on its far left edge. On click, the bar swoops |
|
across the length of the button to rest on the far right edge. --> |
|
|
|
<!--- HTML5 ---> |
|
|
|
<div class="glow-button"> |
|
|
|
<a href="/.../fileName.fileExtension"> </a> |
|
|
|
<label class="glow"> |
|
|
|
<input type="radio" class="glow-radio" name="glow-radio"/> |
|
|
|
<span class="glow-base"> . </span> |
|
|
|
Button Text Goes Here |
|
|
|
<span class="glow-change"> . </span> |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<!--- CSS3 ---> |
|
|
|
.glow-button { |
|
|
|
/* Add some button styling here to suit the design */ |
|
|
|
background: #aabbe6; /* Shade of #39486c; Peintures Sheïla */ |
|
|
|
-moz-box-shadow: |
|
rgba(255,255,255,.33) 1px 1px 1px; |
|
inset rgba(0,0,0,.33) 1px 1px 1px; |
|
|
|
-webkit-box-shadow: |
|
rgba(255,255,255,.33) 1px 1px 1px; |
|
inset rgba(0,0,0,.33) 1px 1px 1px; |
|
|
|
box-shadow: |
|
rgba(255,255,255,.33) 1px 1px 1px; |
|
inset rgba(0,0,0,.33) 1px 1px 1px; |
|
|
|
-webkit-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000); |
|
-moz-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000); |
|
-ms-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000); |
|
-o-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000); |
|
transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000); |
|
} |
|
|
|
.glow-button: hover { |
|
background: #4a6ec7; /* Shade of #39486c; Peintures Sheïla */ |
|
} |
|
|
|
.glow { |
|
display: inline-block; |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
height: auto; |
|
width: 100%; |
|
text-align: center; |
|
background: rgba(0,0,0,0); |
|
} |
|
|
|
.glow-base, |
|
.glow-change { |
|
z-index: 1; |
|
display: block; |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
height: auto; |
|
width: 8px; |
|
font-family: Verdana, sans-serif, serif; |
|
font-size: 1rem; |
|
line-height: 2.5; |
|
color: transparent; |
|
background: rgba(0,0,0,0); |
|
} |
|
|
|
.glow-base { |
|
float: left; |
|
} |
|
|
|
.glow-change { |
|
float: right; |
|
} |
|
|
|
.glow:hover .glow-base { |
|
background: #4a6ec7; /* Shade of #39486c; Peintures Sheïla */ |
|
} |
|
|
|
.glow input { |
|
display: none; |
|
} |
|
|
|
.glow input:checked ~ .glow-change { |
|
background: #4a6ec7; /* Shade of #39486c; Peintures Sheïla */ |
|
} |
|
|
|
.glow input:checked ~ .glow-base { |
|
background: rgba(0,0,0,0); |
|
} |
|
|
|
@media all and (min-width: 360.001px) and (max-width: 640px) { |
|
|
|
.glow-base, |
|
.glow-change { |
|
font-size: 1.25rem; |
|
} |
|
} |
|
|
|
@media all and (min-width: 0px) and (max-width: 360px) { |
|
|
|
.glow-base, |
|
.glow-change { |
|
font-size: 1rem; |
|
} |
|
} |
