Button in CSS
Button е tag със което създаваме бутони и е често използвано
Бутоните могат да бъдат стилизирани по много начини. Показан е disabled button:
class = "disabled-button"
.disabled-button{
width: 200px;
height: 50px;
font-size: 30px;
cursor: not-allowed;
}
Можеш да направиш кръгли бутони като използваш border-radius: 50%
Hover effect
Като използваме :hover след бутона в CSS можем да създадем събитие ако курсорът е върху бутона
#red:hover{
background-color: red;
}
#green:hover{
background-color: green;
}
#blue:hover{
background-color: blue;
}
#opacity-button:hover{
opacity : 0.7;
}
Ripple effect
Като използваме :active след бутона в CSS можем да променяме вида на бутона ако е натиснат
#red:active{
opacity: 0.7;
}
#green:active{
opacity: 0.5;
}
#blue:active{
opacity: 0.3;
}
Button editor
Red: 0
Green: 148
Blue: 170
Red: 128
Green: 128
Blue: 128
Red: 0
Green: 148
Blue: 170
Click Me!
.object:hover{
bckground-color: #0094aa
opacity: 1
}
.object:active{
opacity: 1
}
.object{
border-style: solid
border-width: 0
border-radius: 0
border-color: #808080
background-color: #0094aa
}
.text{
font-familly: sans-serif
font-style: normal
font-weight: normal
font-size: 20
}
Напреднал пример
.button::before, .button::after {
position: absolute;
content: '';
transition: all 0.5s;
}
.button {
border: none;
display: inline-block;
padding: 20px 40px;
color: white;
transform: translate(-50%, -50%);
vertical-align: middle;
font-family: 'Rubik One', sans-serif;
text-decoration: none;
font-size: 4vw;
transition: all 0.5s;
background-color: #3498db;
}
.button::before {
bottom: -15px;
height: 15px;
width: 100%;
left: 8px;
transform: skewX(45deg);
background-color: #196090;
}
.button::after {
right: -15px;
height: 100%;
width: 15px;
bottom: -8px;
transform: skewY(45deg);
background-color: #124364;
}
.button:active {
margin-left: 10px;
margin-top: 10px;
}
.button:active::before {
bottom: -5px;
height: 5px;
left: 3px;
}
.button:active::after {
right: -5px;
width: 5px;
bottom: -3px;
}