ВИД КНОПКИ С ГРАДИЕНТОМ И ТЕНЬЮ НА ЧИСТОМ CSS
Опубликовано 09.12.2017 в 00:45
Совсем недавно в моде было использовать вид кнопок обычным плоским и легким стиле FLAT. В принципе, это и не устаревает и еще до сих пор является актуальным. Но все же, давайте обратим внимания, что начинает прорисовываться новый стиль в WEB. И вскоре всего, он станет очень даже актуальным. Теперь по-тихоньку на смену стиля FLAT приходит новый стиль, который все также имеет легкий плоский стиль, но уже с применением легких и сочных градиентных фонов как для кнопок, так и для других различных элементов дизайна. Ведь согласитесь, смотрится очень даже хорошо и красиво!
И в этом материале мы рассмотрим новый стильный вид кнопок с легким градиентным фоном и тенью.
Так что добавляйте в свою коллекцию данный вид кнопок, это обязательно пригодится вам в ближайшем будущем.
HTML
<button class="button1">Вид кнопки 1</button>
<button class="button2">Вид кнопки 2</button>
<button class="button3">Вид кнопки 3</button>
<button class="button4">Вид кнопки 4</button>
CSS
button {
margin: 2em auto;
display: block;
-webkit-appearance: none;
border: 6px solid rgba(255, 255, 255, 0.45);
border-radius: 50px;
padding: 1em 3em;
background-repeat: no-repeat;
background-size: 100%;
background-clip: padding-box;
position: relative;
color: #FFF;
cursor: pointer;
}
button:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5px;
left: 5px;
border-radius: 50px;
z-index: -1;
filter: blur(14px);
}
button:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50px;
z-index: -1;
filter: blur(14px);
}
.button1 {
background-image: linear-gradient(90deg, #7b81ec, #3bd1d3);
}
.button1:before {
background-image: linear-gradient(90deg, #7b81ec, transparent);
}
.button1:after {
background-image: linear-gradient(90deg, transparent, #3bd1d3);
}
.button2 {
background-image: linear-gradient(90deg, #fa80d2, #fed757);
}
.button2:before {
background-image: linear-gradient(90deg, #fa80d2, transparent);
}
.button2:after {
background-image: linear-gradient(90deg, transparent, #fed757);
}
.button3 {
background-image: linear-gradient(90deg, #8ce0f1, #79f391);
}
.button3:before {
background-image: linear-gradient(90deg, #8ce0f1, transparent);
}
.button3:after {
background-image: linear-gradient(90deg, transparent, #79f391);
}
.button4 {
background-image: linear-gradient(90deg, #525a69, #898dda);
}
.button4:before {
background-image: linear-gradient(90deg, #525a69, transparent);
}
.button4:after {
background-image: linear-gradient(90deg, transparent, #898dda);
}
Мне нравится (6)
И в этом материале мы рассмотрим новый стильный вид кнопок с легким градиентным фоном и тенью.
Так что добавляйте в свою коллекцию данный вид кнопок, это обязательно пригодится вам в ближайшем будущем.
HTML
Код
<button class="button1">Вид кнопки 1</button>
<button class="button2">Вид кнопки 2</button>
<button class="button3">Вид кнопки 3</button>
<button class="button4">Вид кнопки 4</button>
CSS
Код
button {
margin: 2em auto;
display: block;
-webkit-appearance: none;
border: 6px solid rgba(255, 255, 255, 0.45);
border-radius: 50px;
padding: 1em 3em;
background-repeat: no-repeat;
background-size: 100%;
background-clip: padding-box;
position: relative;
color: #FFF;
cursor: pointer;
}
button:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5px;
left: 5px;
border-radius: 50px;
z-index: -1;
filter: blur(14px);
}
button:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50px;
z-index: -1;
filter: blur(14px);
}
.button1 {
background-image: linear-gradient(90deg, #7b81ec, #3bd1d3);
}
.button1:before {
background-image: linear-gradient(90deg, #7b81ec, transparent);
}
.button1:after {
background-image: linear-gradient(90deg, transparent, #3bd1d3);
}
.button2 {
background-image: linear-gradient(90deg, #fa80d2, #fed757);
}
.button2:before {
background-image: linear-gradient(90deg, #fa80d2, transparent);
}
.button2:after {
background-image: linear-gradient(90deg, transparent, #fed757);
}
.button3 {
background-image: linear-gradient(90deg, #8ce0f1, #79f391);
}
.button3:before {
background-image: linear-gradient(90deg, #8ce0f1, transparent);
}
.button3:after {
background-image: linear-gradient(90deg, transparent, #79f391);
}
.button4 {
background-image: linear-gradient(90deg, #525a69, #898dda);
}
.button4:before {
background-image: linear-gradient(90deg, #525a69, transparent);
}
.button4:after {
background-image: linear-gradient(90deg, transparent, #898dda);
}