JSDM

HTML

19
1
<div class="wrapper">
2
  <div class="row">
3
     <a href="#" class="btn-yellow">Hello</a>
4
    <a href="#" class="btn-red">Hallo</a>
5
    <a href="#" class="btn-blue">Marhaban</a>
6
    <a href="#" class="btn-purple">Ni Hao</a>
7
  </div>
8
  <div class="row">
9
     <a href="#" class="btn-green">Hej</a>
10
    <a href="#" class="btn-pink">Bonjour</a>
11
    <a href="#" class="btn-lime">Namaste</a>
12
    <a href="#" class="btn-aqua">Ciao</a>
13
  </div>
14
  <div class="row">
15
     <a href="#" class="btn-orange">Konnichiwa</a>
16
    <a href="#" class="btn-gold">Annyeong</a>
17
    <a href="#" class="btn-grey">Goddag</a>
18
  </div>
19
</div>
!

CSS

x
 
1
html, body
2
  background-color: #f2f2f2
3
  color: #232323
4
  font-family: sans-serif
5
  height: 100vh
6
  
7
  .wrapper
8
    width: 1000px
9
    margin: 0 auto
10
    text-align: center
11
    
12
    .row
13
      margin: 100px auto
14
    
15
    .btn-yellow
16
      position: relative
17
      border: 6px solid #232323
18
      z-index: 2
19
      padding: 12px 22px
20
      margin: 0 10px
21
      box-sizing: border-box
22
      font-size: 26px
23
      font-weight: 600
24
      text-transform: uppercase
25
      text-decoration: none
26
      color: #232323
27
      
28
      &:hover
29
        &:before
30
          top: 0
31
          left: 0
32
          width: 102%
33
          height: 100%
34
      &:active
35
        &:before
36
          top: -10px
37
          left: 18px
38
          width: 102%
39
          height: 100%
40
      
41
      &:before
42
        content: ''
43
        position: absolute
44
        z-index: -1
45
        top: 12px
46
        left: -14px
47
        width: calc(100% + 6px)
48
        height: calc(100% + 6px)
49
        background-color: #f9d159
50
        transition: all .3s ease
51
    
52
    .btn-red
53
      @extend .btn-yellow
54
      
55
      &:before
56
        background-color: #e45050
57
    
58
    .btn-blue
59
      @extend .btn-yellow
60
      
61
      &:before
62
        background-color: #58a9ee
63
      
64
    .btn-purple
65
      @extend .btn-yellow
66
      
67
      &:before
68
        background-color: #bc79e7
69
    
70
    .btn-green
71
      @extend .btn-yellow
72
      
73
      &:before
74
        background-color: #36bf73
75
    
76
    .btn-pink
77
      @extend .btn-yellow
78
      
79
      &:before
80
        background-color: #e855cb
81
    
82
    .btn-lime
83
      @extend .btn-yellow
84
      
85
      &:before
86
        background-color: #a4f478
87
      
88
    .btn-aqua
89
      @extend .btn-yellow
90
      
91
      &:before
92
        background-color: #5af3f5
93
      
94
    .btn-orange
95
      @extend .btn-yellow
96
      
97
      &:before
98
        background-color: #dc612b
99
      
100
    .btn-gold
101
      @extend .btn-yellow
102
      
103
      &:before
104
        background-color: #c5ac47
105
    
106
    .btn-grey
107
      @extend .btn-yellow
108
      
109
      &:before
110
        background-color: #a8a8a1
111
112
      
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

1
 
1
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................