github.com/ns1/terraform@v0.7.10-0.20161109153551-8949419bef40/website/source/assets/stylesheets/_buttons.scss (about)

     1  //
     2  // Button Styles
     3  // --------------------------------------------------
     4  
     5  .outline-btn{
     6  	position: relative;
     7  	display: inline-block;
     8  	// Extra 3px of bottom padding compensates for ::after content
     9  	padding: 20px 30px 23px;
    10  	background-color: transparent;
    11  	color: $white;
    12  	border: 2px solid $white;
    13  	//border-radius: $btn-border-radius;
    14  	font-size: 20px;
    15  	font-weight: 500;
    16  	text-transform: uppercase;
    17  	letter-spacing: 2px;
    18  	text-decoration: none !important;
    19  	@include transition(background-color .3s ease-in-out);
    20  
    21  	&::after {
    22  		font-size: 1.2em;
    23  		content: "»";
    24  		position: relative;
    25  		left: 5px;
    26  	}
    27  
    28  	&.purple{
    29  		color: $purple;
    30  		border: 2px solid $purple;
    31  	}
    32  
    33  	&:hover{
    34  		color: $white;
    35  		background-color: rgba(255, 255, 255, .2);
    36  		@include transition(background-color .3s ease-in-out);
    37  
    38  		&.purple{
    39  			background-color: rgba(255, 255, 255, .5);
    40  		}
    41  	}
    42  }
    43  
    44  .terra-btn{
    45  	position: relative;
    46  	display: inline-block;
    47  	// Extra 3px of bottom padding compensates for ::after content
    48  	padding: 20px 30px 23px;
    49  	color: white;
    50    background-color: $purple;
    51  	font-size: 20px;
    52  	font-weight: 500;
    53  	text-transform: uppercase;
    54  	letter-spacing: 2px;
    55    @include transition( background-color 0.3s ease );
    56  
    57  	&::after {
    58  		font-size: 1.2em;
    59  		content: "»";
    60  		position: relative;
    61  		left: 5px;
    62  	}
    63  
    64    &:hover{
    65  		color: white;
    66      background-color: rgba(130, 47, 247, 0.8);
    67  		text-decoration: none;
    68      @include transition( background-color 0.3s ease );
    69    }
    70  }
    71  
    72  @media (max-width: 768px) {
    73  	.outline-btn, .terra-btn{
    74  		font-size: 16px;
    75  		text-align: center;
    76  	}
    77  }
    78  
    79  //animation on header main nav link hover
    80  /*.li-under a::after {
    81    position: absolute;
    82    top: 68%;
    83    left: 50%;
    84    margin-left: -4px;
    85    width: 6px;
    86    height: 6px;
    87    background-color: white;
    88    content: '';
    89    opacity: 0;
    90    text-decoration: none;
    91    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    92    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    93    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    94    -webkit-transform: translateY(-10px);
    95    -moz-transform: translateY(-10px);
    96    transform: translateY(-10px);
    97  }
    98  
    99  .li-under a:hover::after,
   100  .li-under a:focus::after {
   101      opacity: 1;
   102      -webkit-transform: skewY(15deg) translateY(10px);
   103      -moz-transform: skewY(15deg) translateY(10px);
   104      transform: skewY(15deg) translateY(10px);
   105  }*/