CSS MacOS buttons styles / Estilos de botones de MacOS



Este es el codigo HTML incluyendo el CSS en el mismo archivo con los estilos de los botones
(This is the HTML code including the CSS in the same file with the styles of the buttons):


Example.html
<html>
<head>
<style>

 /* CSS Styled Dinamic Button: */
    #bndinamic {    
    background-color: #ffffff;
    color: black;
    border-radius: 4px;
    border: 1px solid #b9b9b9;
    }
    #bndinamic:hover {
    color: white;
    border-radius: 4px;
    border: 1px solid #0777ca;
    background: -webkit-linear-gradient(top, #37a5e6 0%,#026def 100%);
    }
    #bndinamic:focus {
    color: black;
    border-radius: 4px;
    border: 1px solid #0777ca;
    background: -webkit-linear-gradient(top, #37a5e6 0%,#026def 100%);
    }

     /* CSS Styled [Normal] Button: */
    #bsn {
    background-color: #ffffff;
    color: black;
    border-radius: 4px;
    border: 1px solid #b9b9b9;
    }

     /* CSS Styled [Hover] Button: */
    #bsh {
color: white;
    border-radius: 4px;
    border: 1px solid #0777ca;
    background: -webkit-linear-gradient(top, #37a5e6 0%,#026def 100%);
    }

     /* CSS Styled [Pressed] Button: */
    #bsp {
border-radius: 4px;
    border: 1px solid #0777ca;
    background: -webkit-linear-gradient(top, #37a5e6 0%,#026def 100%);
    }

     /* CSS Styled Without Gradient Button: */
    #bswg {
    background-color: #2783f2;
    color: white;
    border-radius: 4px;
    border: 1px solid #8cb5de;
    }
</style>

 </head>
<body>
<table border="0">
<tr>
<td>Default Button:</td>
<td><button>Button</button></td>
</tr>
<tr>
<td>CSS Styled Dinamic Button:</td>
<td>
<button id="bndinamic">Button</button>
</td>
</tr>
<tr>
<td>CSS Styled [Normal] Button:</td>
<td>
<button id="bsn" >Button</button>
</td>
</tr>
<tr>
<td>CSS Styled [Hover] Button:</td>
<td>
<button id="bsh" >Button</button>
</td>
</tr>
<tr>
<td>CSS Styled [Pressed] Button:</td>
<td>
<button id="bsp" >Button</button>
</td>
</tr>
<tr>
<td>CSS Styled Without Gradient:</td>
<td><button id="bswg" >Button</button>
</td>
</tr>
</table>


 </body>
</html>

Comments

Post a Comment

Popular posts from this blog

Android/Java: Crear un SplashScreen para nuestra aplicación

Image
  Codigo java para el onCreate:   Thread myThread = new Thread(){             @Override             public void run(){                 try {                     sleep(2000);                     Intent intent = new Intent(getApplicationContext(), MainActivity.class);                     startActivity(intent);                     finish();                  } catch (InterruptedException e){ ...
Read more

Android/Java: Video de fondo en nuestro Login

Image
  Codigo del Main: public class MainActivity extends AppCompatActivity {     VideoView vv_fondo;     MediaPlayer mMediaPlayer;     int mCurrentVideoPosition;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);             vv_fondo = findViewById(R.id.vv_fondo);           Uri uri = Uri.parse("android.resource://"                             + getPackageName()                      ...
Read more

10% Of what we see on the internet are ads

Image
After several months of using the Pi-Hole ad blocker on my home network, I have reviewed the statistics, and I was quite surprised. I use an iPhone for my day to day, and I have DNS configured to work with Pi-Hole, so these results are based on a person using an iPhone, but since the Ads providers and the applications that I use are for Android as well, I would think the stats would be the same or very similar for an Android user as well. About 10% of internet traffic and bandwidth is used to load ads on my phone, I wouldn't have imagined how much but that's the way it is, and I have to admit that not all Ads are listed here, those on Facebook or Instagram aren't Pi-Hole blocks them therefore they are not reflected, if they were taken into account I would believe that the percentage would reach 15%. These graph data are daily, but I review this graph daily and very similar statistics appear every day, varying by 0.4% more or less. I hope that this information has been curio...
Read more