CSS: gombok stílusa
Weblapodon található gombok stílusát nem csak a szerkesztőd adta lehetőséggekkel lehet beállítani, de CSS-el is szerkeszthető. A CSS segítségével vizuálisan felturbózhatod weboldalad kinézetét, de mi is az a CSS?
A CSS a angol „Cascading Style sheets” kifejezés rövidítése, mely a weblap vizuális stílusáért felelős.
A mai rövid cikkünkben egy gomb átalakítását fogjuk elvégezni.
A következő kódot fogjuk használni a díszítéshez:
.button {
margin: 10px;
font-family: „Arial Black”, Gadget, sans-serif;
font-size: 50px;
padding: 15px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: #FFF;
box-shadow: 0 0 20px #eee;
border: 0 !important;
width: 200px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
cursor: pointer;
display: inline-block;
border-radius: 25px;
background-image: linear-gradient(to right, #7474BF 0%, #348AC7 51%, #7474BF 100%)}
Legvégül beállítjuk az egér ráhúzás esetére is a stílust:
button:hover{
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
margin: 8px 10px 12px;
background-position: right center;}
Ha felkeltete az érdeklődésedet a CSS világa az alábbi linken többet is olvashatsz róla: