A Pen by Hugo Darby-Brown.

CSS-Sublime-Text-Logo.markdown

CSS Sublime Text Logo

Scaleable Clickable Sublime Text Logo

A Pen by Hugo Darby-Brown on CodePen.

License.

index.html

<h1>CSS Sublime Logo</h1>
<div class="button">
  <div class="outer">
    <div class="height">
      <div class="inner">S</div>
    </div>
  </div>
</div>

<input id="logo-size" type="range" min="100" value="100" max="200">

script.js

$('#logo-size').change(function () {                    
  var fontsize = $(this).val()/10 + "px";
  $('html').css("font-size", fontsize );
});

style.scss

@import "compass";
$sublime-color: #ff7b00;

html {
  background-color: #636363;
  @include filter-gradient(#636363, #0e0e0e, horizontal);
  @include background-image(radial-gradient(center, ellipse cover,  #636363 0%,#0e0e0e 100%));
  height: 100%;
  font-size: 10px;
  text-align: center;
}

*{
  transition: 0.4s text-shadow ease;
  @include callout;
}

h1 {
  color: $sublime-color;
  font-family: 'Fugaz One', cursive;
  font-size: 50px;
  margin: 10px 0;
  text-shadow: 2px 2px 2px rgba(black,0.6);
}




.button {
  cursor: pointer;
  color: $sublime-color;
  font-family: 'Averia Libre';
  height: 18rem;
  margin: 4rem auto;
  width: 22rem;
  z-index: 5;
  


.outer {
  background: #d9d9d9;
  border-radius: 1rem;
  box-shadow: #999999 0 0.7rem 0;
  height: 100%;
  outline: 1px solid transparent;
  padding: 1rem;
  position: relative;
    transform: perspective(800px) rotateX(20deg);
  width: 100%;

 .height {
  @include filter-gradient(#545454, #4d4d4d, horizontal);
  @include background-image(linear-gradient(left,  #545454 0%,#222222 15%,#222222 82%,#4d4d4d 100%));
  border-radius: 1rem;
  box-shadow: 0 0.1rem 0.1rem rgba(0,0,0,0.85);	
  height: 100%;
  margin-top: -3rem;
  padding-bottom: 2.5rem; 
  position: relative;
  transition: all 0.1s ease-in-out;
}       
}
  
&:hover .outer .height {
  box-shadow: rgba(0,0,0,0.25) 0px 0.2rem 0.2rem, inset rgba(0,0,0,0.35) 0px -0.2rem 0.6rem;
  margin-top: -2rem; 
  padding-bottom: 1.5rem;
}

&:active .outer .height {
  margin-top: -0.5rem;
  padding-bottom: 0px;
  transition: all 0.1s ease-in-out;
}

.outer .height .inner {
  @include filter-gradient(#a1a1a1, #4c4c4c, vertical);
  @include background-image(linear-gradient(top,  #a1a1a1 0%,#585858 50%,#4c4c4c 50%,#4c4c4c 100%));
  border-radius: 1rem;
  box-shadow: inset 0 -0.1rem 0.1rem rgba(white,0.85),inset 0.1rem 0.1rem 0.1rem rgba(black,0.85),inset -0.1rem 0 0.1rem rgba(black,0.85)  ; 
  font-size: 14rem;
  font-weight: 900;
  height: 100%;
  line-height: 1.2;
  position: relative;
  text-align: center;
  text-shadow: 
    -0.1rem -0.2rem 0.3rem #000000,
    0.1rem 0.2rem 0.3rem rgba(white,0.8), 
    0 0 4rem #ff7b00;
}

&:active .outer .height .inner{  
  border-radius: 1rem;
  box-shadow: inset rgba(0,0,0,0.9) 0 0 0.8rem;
  @include filter-gradient(#838282, #292929, vertical);
  @include background-image(linear-gradient(top,  #676767 0%,#3a3939 50%,#292929 50%,#292929 100%));
  color: darken($sublime-color,10); 
  text-shadow: 
    -0.1rem -0.2rem 0.3rem #000000;
    transition:  0.4s color ease, 0.4s background ease;
}
}

input[type='range'] {
  appearance: none !important;
  background: #ccc;
  border-radius: 15px;
  height:15px;
  margin: 30px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  @include filter-gradient(#a1a1a1, #4c4c4c, vertical);
  @include background-image(linear-gradient(top,  #a1a1a1 0%,#585858 50%,#4c4c4c 50%,#4c4c4c 100%));
  border-radius: 2px;
  box-shadow: 0 5px 0 #1e1e1e;
  height: 40px;
  width: 40px;
  
  
  &:after {
      content: 's';
      color: $sublime-color;
      font-family: 'Averia Libre';
      font-size: 40px; 
      font-weight: 900;
      line-height: 0.7;
      margin-left: 10px;
      text-shadow: 
        -0.1px -1px 1px #000000,
        1px 1px 1px rgba(white,0.8);
    }
}