github.com/simonswine/terraform@v0.9.0-beta2/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    &.small-outline-btn{
    34      font-size: 16px;
    35      padding: 0px 15px 3px 10px;
    36      letter-spacing: 0;
    37      border: 2px solid rgba(255, 255, 255, .7);
    38    }
    39  
    40  	&:hover{
    41  		color: $white;
    42  		background-color: rgba(255, 255, 255, .2);
    43  		@include transition(background-color .3s ease-in-out);
    44  
    45  		&.purple{
    46  			background-color: rgba(255, 255, 255, .5);
    47  		}
    48  	}
    49  }
    50  
    51  .simple-btn{
    52  	position: relative;
    53  	display: inline-block;
    54  	// Extra 3px of bottom padding compensates for ::after content
    55  	background-color: transparent;
    56  	color: $white;
    57  	font-size: 16px;
    58  	font-weight: 500;
    59  	text-transform: uppercase;
    60  	text-decoration: none !important;
    61  	@include transition(color .3s ease-in-out);
    62  
    63  	&::after {
    64  		font-size: 1.2em;
    65  		content: "»";
    66  		position: relative;
    67  		left: 5px;
    68  	}
    69  
    70  	&:hover{
    71  		color: rgba(255, 255, 255, .4);
    72  		@include transition(color .3s ease-in-out);
    73  	}
    74  }
    75  
    76  .terra-btn{
    77  	position: relative;
    78  	display: inline-block;
    79  	// Extra 3px of bottom padding compensates for ::after content
    80  	padding: 20px 30px 23px;
    81  	color: white;
    82    background-color: $purple;
    83  	font-size: 20px;
    84  	font-weight: 500;
    85  	text-transform: uppercase;
    86  	letter-spacing: 2px;
    87    @include transition( background-color 0.3s ease );
    88  
    89  	&::after {
    90  		font-size: 1.2em;
    91  		content: "»";
    92  		position: relative;
    93  		left: 5px;
    94  	}
    95  
    96    &:hover{
    97  		color: white;
    98      background-color: rgba(130, 47, 247, 0.8);
    99  		text-decoration: none;
   100      @include transition( background-color 0.3s ease );
   101    }
   102  }
   103  
   104  @media (max-width: 768px) {
   105  	.outline-btn, .terra-btn{
   106  		font-size: 16px;
   107  		text-align: center;
   108  	}
   109  }
   110  
   111  //animation on header main nav link hover
   112  /*.li-under a::after {
   113    position: absolute;
   114    top: 68%;
   115    left: 50%;
   116    margin-left: -4px;
   117    width: 6px;
   118    height: 6px;
   119    background-color: white;
   120    content: '';
   121    opacity: 0;
   122    text-decoration: none;
   123    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
   124    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
   125    transition: height 0.3s, opacity 0.3s, transform 0.3s;
   126    -webkit-transform: translateY(-10px);
   127    -moz-transform: translateY(-10px);
   128    transform: translateY(-10px);
   129  }
   130  
   131  .li-under a:hover::after,
   132  .li-under a:focus::after {
   133      opacity: 1;
   134      -webkit-transform: skewY(15deg) translateY(10px);
   135      -moz-transform: skewY(15deg) translateY(10px);
   136      transform: skewY(15deg) translateY(10px);
   137  }*/