Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    /* CUSTOM PROPERTIES */
​
.dash-button {
  --border-max-width: 2px;
  --dash-size: 5px;
  --v-padding: 30px;
  --h-padding: 20px;
  --min-width: 350px;
  --bg-color: #fffad8;
  --color: #fb6060;
}
​
/* STYLE */
​
html, body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
​
.dash-button {
  position: relative;
  margin: 10px;
  padding: var(--h-padding) var(--v-padding);
  border-radius: 4em;
  border: none;
  min-width: var(--min-width);
  background-color: transparent;
  color: var(--color);
} .dash-button::before {
    box-sizing: border-box;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4em;
    border-width: var(--dash-size);
    border-style: dashed;
    border-color: var(--color);
    background-color: var(--bg-color);
    z-index: -1;
  }
  .dash-button::after {
    content: '';
    display: block;
    position: absolute;
    top: var(--border-max-width);
    left: var(--border-max-width);
    width: calc(100% - var(--border-max-width) * 2);
    height: calc(100% - var(--border-max-width) * 2);
    border-radius: 4em;
    background-color: var(--bg-color);
    z-index: -1;
  }
​
​
.dash-button--classic {
  color: #aaa;
}
.dash-button--classic::after {
  content: none;
}
.dash-button--classic::before {
  border-color: #aaa;
  background-color: #fff;
}
  </style>
  
<body>
  
  <button class="dash-button">من دکمه ای هستم که حاشیه دارد</button>
​
<button class="dash-button dash-button--classic">من دکمه ی حاشیه دار و بی رنگ هستم</button>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Amir-ZMpro
0viewers